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

.@{veui-prefix}-date-picker {
  &:extend(._veui-dropdown-button all);
  position: relative;
  display: inline-block;
  width: @veui-date-picker-width;

  &-range {
    width: @veui-date-picker-width-range;
  }

  &-inputs .@{veui-prefix}-input,
  .@{veui-prefix}-input {
    border: 0;
    box-shadow: none;
  }
  &-trigger {
    .veui-button-transition();
    display: flex;
    align-items: center;
    border: 1px solid @veui-input-border-color;
    padding-right: @veui-input-padding;
    border-radius: @veui-border-radius-l;
    outline: none;
    background-color: @veui-input-background-color;

    .@{veui-prefix}-input {
      height: @veui-date-picker-input-height;
      border: 0;
      padding-right: 0;
      background-color: transparent;
      .margin(-1px, _);
    }

    .@{veui-prefix}-invalid & {
      border-color: @veui-input-border-color-error;
      .@{veui-prefix}-input {
        color: @veui-input-font-color-error;
      }

      &:hover {
        border-color: @veui-input-border-color-error-hover;
      }
      &:active,
      &.focus-visible {
        .veui-focus-ring(
          @veui-input-border-color-error-focus,
          @veui-input-shadow-error-focus
        );
      }
    }
    .@{veui-prefix}-disabled .@{veui-prefix}-input-placeholder {
      color: @veui-input-font-color-disabled;
    }
  }

  &:not(.@{veui-prefix}-disabled):not(.@{veui-prefix}-invalid) &-trigger {
    &:hover {
      border-color: @veui-input-border-color-hover;
    }
    &:active,
    &.focus-visible {
      .veui-focus-ring(@veui-input-border-color-focus, @veui-input-shadow-focus);
    }
  }

  &:not(.@{veui-prefix}-disabled):not(.@{veui-prefix}-invalid):not(.@{veui-prefix}-readonly) &-trigger {
    &:focus-within {
      .veui-focus-ring(@veui-input-border-color-focus, @veui-input-shadow-focus);
    }
  }

  &-icon {
    display: flex;
    position: relative;
    margin-left: @veui-input-content-spacing;
  }

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

    .@{veui-prefix}-readonly &,
    .@{veui-prefix}-disabled & {
      color: @veui-date-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);
      color: @veui-date-picker-icon-color-clear;
    }

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

  &-overlay-content {
    &:extend(._veui-dropdown-overlay all);
    &[ui] {
      max-height: none;
    }
    box-shadow: @veui-date-picker-dropdown-shadow;
    .border-radius(@veui-date-picker-dropdown-border-radius-m);
    margin-top: -1px;
    display: flex;
    align-items: stretch;

  }
  &-overlay-content .@{veui-prefix}-calendar-type-year,
  &-overlay-content .@{veui-prefix}-calendar-type-year .@{veui-prefix}-calendar-panel,
  &-overlay-content &-inputs {
    min-width: 100%;
  }

  &-inputs {
    border-bottom: 1px solid @veui-input-border-color;
    display: flex;
    align-items: center;
    .@{veui-prefix}-input {
      flex: 1 1 auto;
      width: auto; // 覆盖 width
      border-bottom: 1px solid @veui-input-border-color;
      margin-bottom: -1px;
      background-color: transparent;
      border-radius: 0;
      z-index: 1;
      &:hover {
        border-color: @veui-border-color-strong-hover;
      }
      &.@{veui-prefix}-focus {
        box-shadow: @veui-date-picker-overlay-input-shadow-focus;
        border-color: @veui-input-border-color-focus;
      }
    }
  }

  &-range &-label {
    width: auto;
    flex: 1 1 auto;
  }

  &-tilde {
    color: @veui-font-color-aux;

    .@{veui-prefix}-disabled & {
      color: @veui-input-font-color-disabled;
    }

    .@{veui-prefix}-readonly & {
      color: @veui-input-font-color-read-only;
    }
  }

  &-shortcuts {
    display: flex;
    flex-direction: column;
    padding: @veui-date-picker-header-padding-y 0;
    border-bottom: 1px solid @veui-date-picker-panel-separator-color;
    border-top: 1px solid @veui-date-picker-panel-separator-color;
  }

  &-shortcut {
    .veui-button-transition();
    text-align: left;
    .centered-line(@veui-date-picker-list-item-height-m);
    border: none;
    background: none;
    color: @veui-date-picker-list-font-color;
    outline: none;
    padding: 0 @veui-date-picker-panel-padding-x;
    margin-bottom: @veui-date-picker-list-item-spacing;
    cursor: pointer;

    &:hover {
      color: @veui-date-picker-list-font-color-hover;
      background-color: @veui-date-picker-list-background-color-hover;
    }

    &.focus-visible {
      color: @veui-date-picker-list-font-color-focus;
      background-color: @veui-date-picker-list-background-color-focus;
    }

    &:active {
      color: @veui-date-picker-list-font-color-active;
      background-color: @veui-date-picker-list-background-color-active;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  &-expanded &-icon {
    transform: none;
  }

  &.@{veui-prefix}-readonly &-trigger,
  &.@{veui-prefix}-disabled &-trigger {
    background-color: @veui-input-background-color-disabled;
  }
  &[ui~="s"] &-trigger {
    .@{veui-prefix}-input {
      height: @veui-date-picker-input-height-s;
    }
  }
  &-overlay-content[ui~="s"],
  &[ui~="s"] {
    font-size: @veui-date-picker-font-size-s;
  }
  &-overlay-content[ui~="s"] {
    .border-radius(@veui-date-picker-dropdown-border-radius-s);
  }
  &-overlay-content[ui~="s"] &-shortcut {
    .centered-line(@veui-date-picker-list-item-height-s);
  }
}

.@{veui-prefix}-invalid .@{veui-prefix}-date-picker-trigger:focus-within {
    .veui-focus-ring(@veui-input-border-color-error, @veui-input-shadow-error-focus);
}