@import "../lib.less";
@import (reference) "../dropdown.less";

.@{veui-prefix}-date-picker {
  &:extend(._veui-dropdown-button all);
  position: relative;
  display: inline-block;
  width: @dls-date-picker-width;
  border-radius: @dls-input-border-radius-m;
  background-color: @dls-input-background-color;

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

  &[ui~="xs"] {
    border-radius: @dls-input-border-radius-xs;
  }

  &[ui~="s"] {
    border-radius: @dls-input-border-radius-s;
  }

  &[ui~="l"] {
    border-radius: @dls-input-border-radius-l;
  }

  &-trigger {
    .veui-button-transition();
    display: flex;
    align-items: center;
    border: 1px solid @dls-input-border-color;
    padding-right: @dls-input-padding;
    border-radius: inherit;
    outline: none;
    background-color: transparent;

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

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

      .@{veui-prefix}-input {
        color: @dls-input-font-color-error;
      }

      &:hover {
        border-color: @dls-input-border-color-error-hover;
      }

      &[data-focus-visible-added] {
        .dls-focus-ring(
          @dls-input-border-color-error-focus,
          @dls-input-shadow-error-focus
        );
      }
    }
  }

  &:not(.@{veui-prefix}-disabled):not(.@{veui-prefix}-invalid) &-trigger {
    &:hover {
      border-color: @dls-input-border-color-hover;
    }

    &[data-focus-visible-added] {
      .dls-focus-ring(@dls-input-border-color-focus, @dls-input-shadow-focus);
    }
  }

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

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

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

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

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

    .@{veui-prefix}-icon {
      .dls-icon-size(@dls-input-icon-size);
      color: @dls-date-picker-icon-color;
    }

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

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

    .@{veui-prefix}-calendar {
      border-radius: inherit;
    }
  }
  &-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 @dls-input-border-color;
    display: flex;
    align-items: center;
    .border-top-radius(inherit);

    .@{veui-prefix}-input {
      flex: 1 1 auto;
      width: auto; // 覆盖 width
      margin-bottom: -1px;
      // 不加会导致年份选择的 input 下面的 highlight 部分被滚动条盖住
      z-index: 1;

      &:first-child {
        border-top-left-radius: inherit;
      }
      &:last-child {
        border-top-right-radius: inherit;
      }
    }
  }

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

  &-tilde {
    overflow: hidden;
    padding: 0 @dls-date-picker-range-connector-padding-x;
    color: @dls-icon-color-aux;

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

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

  &-shortcuts {
    display: flex;
    flex-direction: column;
    padding: @dls-date-picker-header-padding-y 0;
    border: 1px solid @dls-date-picker-panel-separator-color;
    border-right: 0;
    .border-left-radius(@dls-date-picker-dropdown-border-radius-m);

    & + .@{veui-prefix}-calendar {
      .border-left-radius(0);
    }
  }

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

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

    &[data-focus-visible-added] {
      color: @dls-date-picker-list-font-color-focus;
      background-color: @dls-date-picker-list-background-color-focus;
    }

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

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

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

  &.@{veui-prefix}-readonly,
  &.@{veui-prefix}-disabled {
    background-color: @dls-input-background-color-disabled;
  }

  &-overlay-content[ui~="s"],
  &[ui~="s"] {
    font-size: @dls-date-picker-font-size-s;
  }
  &-overlay-content[ui~="s"] {
    .border-radius(@dls-date-picker-dropdown-border-radius-s);
  }
  &-overlay-content[ui~="s"] &-shortcut {
    .centered-line(@dls-date-picker-list-item-height-s);
    .border-left-radius(@dls-date-picker-dropdown-border-radius-s);
  }
}