@import './variables.scss';
@import './resets.scss';

*,
*::before,
*::after {
  box-sizing: border-box;
}

:focus {
  outline: var(--outline-color) solid var(--outline-size);
  outline-offset: calc(-1 * var(--outline-size)); // fix focus ring getting cropped
}

.picker {
  contain: content;
  display: flex;
  flex-direction: column;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  width: 100%;
  height: 100%;
}

// via https://stackoverflow.com/a/19758620
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

.abs-pos {
  position: absolute;
  left: 0;
  top: 0;
}

.shown {
  display: block;
}

.not-shown {
  display: none;
}