/* ==================================
   #TIMEPICKER
   ================================== */

/* Variables
   ========================================================================== */

/* Component
   ========================================================================== */

.au-c-time-picker {
  display: flex;
  align-items: flex-end;
}

.au-c-time-picker__input-wrapper {
  position: relative;
}

.au-c-time-picker__input {
  width: 100%;
  max-width: 8rem;
}

.au-c-time-picker__button-wrapper {
  position: absolute;
  right: 0;
  height: calc(100% - 0.2rem);
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  top: 0.1rem;
  right: 0.1rem;
  border-left: 0.1rem solid var(--au-gray-300);
}

.au-c-time-picker__button {
  @include au-font-size(1.4rem, 1);
  cursor: pointer;
  flex-grow: 1;
  font-family: var(--au-font);
  font-weight: var(--au-medium);
  background-color: var(--au-white);
  border: none;
  padding: 0 $au-unit-tiny;
  height: 100%;
  margin: 0;

  &:first-child {
    border-top-right-radius: 0.3rem;
  }

  &:last-child {
    border-bottom-right-radius: 0.3rem;
  }

  & + & {
    border-top: 0.1rem solid var(--au-gray-300);
  }

  &,
  &:visited {
    color: var(--au-gray-900);
    background-color: var(--au-white);
  }

  &:hover,
  &:focus {
    color: var(--au-gray-700);
    background-color: var(--au-gray-100);
  }

  &:focus {
    outline: var(--au-outline);
    outline-offset: var(--au-outline-offset);
  }
}

.au-c-time-picker__separator {
  font-weight: var(--au-medium);
  padding: $au-unit-tiny;
}

.au-c-time-picker__current {
  margin-left: $au-unit-small;
}