@import "../lib.less";
@import (reference) "../dropdown.less";
@import "../variables/components/time-picker.less";
@import "../variables/components/input.less";
@import "../variables/components/option.less";

.@{veui-prefix}-time-picker {
  display: inline-block;
  width: @veui-time-picker-width;

  & > .@{veui-prefix}-input {
    width: 100%;
  }

  &-overlay-content {
    &:extend(._veui-dropdown-overlay all);
    min-width: @veui-time-picker-dropdown-min-width;
    background-color: @veui-option-background-color;
    box-shadow: @veui-option-dropdown-shadow;
    display: flex;
  }

  &-option-group-wrapper {
    flex-shrink: 1;
    flex-grow: 1;
    max-height: @veui-option-dropdown-max-height-m;
    overflow: auto;
    border-right: 1px solid @veui-option-group-separator-color;
    &:last-child {
      border-right: none;
    }

    .@{veui-prefix}-option {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;

      &:hover {
        background: @veui-time-picker-background-color-normal-hover;
      }
    
      &.focus-visible {
        background: @veui-time-picker-background-color-normal-focus;
      }
    
      &:active {
        background: @veui-time-picker-background-color-normal-active;
      }

      &.@{veui-prefix}-option-disabled {
        background: @veui-time-picker-background-color-normal-disabled;
      }

      &::before {
        content: "00";
        display: block;
        height: 0;
        font-weight: @veui-option-font-weight-selected;
        opacity: 0;
      }
    }
    .@{veui-prefix}-option-selected {
      font-weight: 500;
      color: @veui-time-picker-font-color-selected;
    }
  }

  &-icon {
    display: flex;
    position: relative;
    .@{veui-prefix}-button,
    .@{veui-prefix}-button:hover {
      color: @veui-time-picker-icon-color-disabled;
    } 
  }

  &-clock {
    .veui-icon-size(@veui-input-icon-size);
    .veui-transition(color, opacity);
    color: @veui-time-picker-icon-color;

    .@{veui-prefix}-readonly &,
    .@{veui-prefix}-disabled & {
      color: @veui-time-picker-icon-color-disabled;
    }
  }

  &:not(.@{veui-prefix}-readonly):not(.@{veui-prefix}-disabled):hover
    &-clear
    + &-clock,
  .@{veui-prefix}-focus &-clear + &-clock,
  &-clear.focus-visible + &-clock {
    opacity: 0;
  }

  &-clear {
    .absolute(50%, 50%, _, _);
    transform: translate(50%, -50%);
    opacity: 0;
    z-index: 1;

    .@{veui-prefix}-icon {
      .veui-icon-size(@veui-input-icon-size);
    }

    .@{veui-prefix}-time-picker:not(.@{veui-prefix}-readonly):not(.@{veui-prefix}-disabled):hover
      &,
    .@{veui-prefix}-focus &,
    &.focus-visible {
      opacity: 1;
    }
  }

  &-overlay-minute {
    .@{veui-prefix}-time-picker-option-group-wrapper {
      width: @veui-time-picker-minute-width;
    }
  }
  &-overlay {
    .@{veui-prefix}-time-picker-overlay-second {
      .@{veui-prefix}-time-picker-option-group-wrapper {
        width: @veui-time-picker-second-width;
      }
    }
  }
}