@use "../../style/index" as mixins;

$prefix: "adui-time";

.#{$prefix} {
  &-large {
    --width: var(--tp-w-lg);
  }
  &-medium {
    --width: var(--tp-w-md);
  }
  &-small {
    --width: var(--tp-w-sm);
  }
  &-mini {
    --width: var(--tp-w-mn);
  }

  &-input {
    width: calc(var(--width) * 1px);
  }

  // TimeSelect
  &-timeSelect {
    display: inline-block;
    vertical-align: top;
    padding-bottom: 150px;
    width: calc(var(--width) * 0.5px);
    height: 180px;
    overflow: hidden;

    &:hover {
      @include mixins.overlay();
    }

    &:not(:last-child) {
      box-shadow: 1px 0 0 var(--gray-300);
    }

    &:first-child {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }

    &:last-child {
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
  }

  &-integerTimeSelect {
    @include mixins.overlay();
    width: calc(var(--width) * 1px);
  }

  &-item {
    display: flex;
    padding-left: 8px;
    width: 100%;
    height: 30px;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--motion-duration-fast) var(--ease-in-out);

    &:not(.#{$prefix}-disabled) {
      &:hover {
        background-color: var(--gray-200);
      }

      &:active {
        background-color: var(--gray-300);
      }
    }

    &.#{$prefix}-active {
      background-color: rgba(0, 0, 0, 0.06);
    }

    &.#{$prefix}-disabled {
      color: var(--gray-700);
      cursor: not-allowed;
    }
  }
}