@import "../lib.less";

.make-header-height(@font-size) {
  @header-height: dls-sum(
    dls-line-height(@dls-line-height-1, @font-size),
    @dls-date-picker-header-padding-y * 2
  );
}

.make-day-body-height(@font-size, @date-picker-cell-height) {
  @day-body-height: dls-sum(
    @dls-date-picker-day-body-padding-top,
    dls-line-height(@dls-line-height-1, @font-size),
    @dls-date-picker-day-body-padding-bottom,
    @dls-date-picker-weekdays-spacing-after,
    @date-picker-cell-height * 6,
    @dls-date-picker-day-cell-spacing-y * 7
  );
}

.make-month-body-height(@font-size, @date-picker-cell-height) {
  @month-body-height: dls-sum(
    @dls-date-picker-month-body-padding-top,
    @dls-date-picker-month-cell-spacing-y * 4,
    @date-picker-cell-height * 4
  );
}

.make-year-body-height(@font-size, @date-picker-cell-height) {
  @year-body-height: dls-sum(
    @dls-date-picker-year-body-padding-top,
    @dls-date-picker-year-cell-spacing-y * 4,
    @date-picker-cell-height * 4
  );
}

.make-date-panel-width(@date-picker-cell-width) {
  @date-panel-width: dls-sum(
    @dls-date-picker-panel-padding-x * 2,
    @date-picker-cell-width * 7,
    @dls-date-picker-day-cell-spacing-x * 8
  );
}

.@{veui-prefix}-calendar {
  display: inline-block;
  border: 1px solid @dls-date-picker-panel-separator-color;
  background-color: @dls-date-picker-dropdown-background-color;
  outline: none;
  font-size: @dls-date-picker-font-size-m;

  button {
    .veui-button-transition();
    line-height: @dls-line-height-1;

    &.focus-visible {
      .dls-focus-ring(
        @dls-date-picker-cell-border-color-focus,
        @dls-date-picker-cell-shadow-focus
      );
    }
  }

  .make-date-panel-width(@dls-date-picker-cell-width-m);

  &-type-year .@{veui-prefix}-date-picker-inputs {
    width: dls-sum(@date-panel-width, -@dls-date-picker-year-scroller-width);
  }

  &-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    .size(@date-panel-width, auto);

    .@{veui-prefix}-calendar-range & {
      display: inline-flex;
    }

    & + & {
      padding-left: @dls-date-picker-range-panel-spacing;
      width: dls-sum(@date-panel-width, @dls-date-picker-range-panel-spacing);
    }

    .@{veui-prefix}-calendar-body {
      flex-grow: 1;
    }
  }

  &-type-date &-panel,
  &-type-month &-panel {
    &::before {
      content: "";
      .make-header-height(@dls-date-picker-font-size-m);
      .absolute(dls-sum(@header-height, -1px), 0, _, 0);
      height: 0;
      border-bottom: 1px solid @dls-date-picker-panel-separator-color;
      z-index: 1;
    }
  }

  &-panel + &-expanded &-body,
  &-expanded + &-panel &-body {
    position: relative;
    &::after {
      content: "";
      display: block;
      .absolute(0, _, 0, -@dls-date-picker-range-panel-spacing / 2);
      border-left: 1px solid @dls-date-picker-panel-separator-color;
    }
  }

  &-type-month &-panel,
  &-type-year &-panel {
    width: dls-sum(@date-panel-width, -@dls-date-picker-year-scroller-width);
  }
  &-type-month &-panel + &-panel {
    width: dls-sum(
      @date-panel-width,
      -@dls-date-picker-year-scroller-width,
      @dls-date-picker-range-panel-spacing
    );
  }

  &-head {
    padding: @dls-date-picker-header-padding-y @dls-date-picker-panel-padding-x;
    display: flex;
    align-items: center;

    .@{veui-prefix}-icon {
      .dls-icon-size(@dls-date-picker-header-pagination-icon-size);
    }
  }

  &-select,
  &-prev,
  &-next,
  &-backward,
  &-forward {
    flex-grow: 0;
    visibility: hidden;

    &.@{veui-prefix}-calendar-visible {
      visibility: visible;
    }
  }

  &-prev {
    margin-left: @dls-date-picker-header-pagination-spacing;
  }
  &-next {
    margin-right: @dls-date-picker-header-pagination-spacing;
  }

  &-select {
    text-align: center;
    color: @dls-foreground-color-neutral;
    margin: auto;
    height: auto;
    border: none;
    line-height: @dls-line-height-1;

    &.focus-visible,
    &:hover {
      background-color: @dls-background-color-base-1;
      color: @dls-foreground-color-neutral;
    }

    .@{veui-prefix}-icon {
      margin-left: @dls-date-picker-header-icon-aux-spacing;
      margin-right: 0;
      .dls-icon-size(@dls-date-picker-header-icon-size-aux);
      color: @dls-icon-color-aux;
      .veui-transition(transform);

      .@{veui-prefix}-calendar-expanded & {
        transform: rotate(180deg);
      }
    }
  }

  &-body {
    display: flex;
  }

  &-type-date &-body {
    .make-day-body-height(
      @dls-date-picker-font-size-m,
      @dls-date-picker-cell-height-m
    );
    height: @day-body-height;
  }

  &-type-month &-body {
    .make-month-body-height(
      @dls-date-picker-font-size-m,
      @dls-date-picker-cell-height-m
    );
    height: @month-body-height;
  }

  &-type-year &-body {
    .make-year-body-height(
      @dls-date-picker-font-size-m,
      @dls-date-picker-cell-height-m
    );
    height: @year-body-height;
  }

  &-type-date &-panel:not(&-expanded) &-body {
    padding: @dls-date-picker-day-body-padding-top
      @dls-date-picker-panel-padding-x @dls-date-picker-day-body-padding-bottom;
  }

  &-type-month &-expanded &-body,
  &-type-year &-body {
    .@{veui-prefix}-calendar-year-table-wrap {
      overflow: auto;
      padding: dls-sum(
          @dls-date-picker-month-body-padding-top,
          -@dls-date-picker-month-cell-spacing-y
        )
        @dls-date-picker-panel-padding-x 0;
    }
    .@{veui-prefix}-calendar-year-table {
      width: 100%;
    }
  }

  &-table {
    flex-grow: 1;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: @dls-date-picker-day-cell-spacing-x
      @dls-date-picker-day-cell-spacing-y;

    th,
    td {
      text-align: center;
      padding: 0;
      font-weight: @dls-date-picker-cell-font-weight;
    }

    button {
      border: 1px solid @dls-date-picker-cell-border-color;
      border-radius: @dls-date-picker-cell-border-radius-m;
      padding: 0;
      background-color: @dls-date-picker-cell-background-color;
      color: @dls-date-picker-cell-font-color;
      text-align: center;
      outline: none;
      cursor: pointer;
      font-weight: @dls-date-picker-cell-font-weight;
      .size(auto, @dls-date-picker-cell-height-m);

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

      &.focus-visible {
        background-color: @dls-date-picker-cell-background-color-focus;
        .dls-focus-ring(
          @dls-date-picker-cell-border-color-focus,
          @dls-date-picker-cell-shadow-focus
        );
      }

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

      &:disabled {
        &,
        &:hover {
          background-color: @dls-date-picker-cell-background-color-disabled;
          color: @dls-date-picker-cell-font-color-disabled;
          cursor: not-allowed;
        }
      }
    }
  }

  &-type-date {
    th {
      padding-bottom: dls-sum(
        @dls-date-picker-weekdays-spacing-after,
        -@dls-date-picker-day-cell-spacing-y
      );
    }
  }

  &-date-table button {
    .size(@dls-date-picker-cell-width-m, @dls-date-picker-cell-height-m);
  }

  &-month-table,
  &-year-table {
    td {
      width: 100% / 3;
    }
    button {
      // TODO
      transition-duration: 0s;
    }
  }

  &-table &-selected {
    button {
      background-color: @dls-date-picker-cell-background-color-selected;
      color: @dls-date-picker-cell-font-color-selected;
      font-weight: @dls-date-picker-cell-font-weight-selected;

      &:hover {
        background-color: @dls-date-picker-cell-background-color-selected-hover;
      }

      &.focus-visible {
        background-color: @dls-date-picker-cell-background-color-selected-focus;
      }

      &:active {
        background-color: @dls-date-picker-cell-background-color-selected-active;
      }
    }
  }

  &-month-table {
    padding: dls-sum(
        @dls-date-picker-month-body-padding-top,
        -@dls-date-picker-month-cell-spacing-y
      )
      @dls-date-picker-panel-padding-x 0;
    border-spacing: 0 @dls-date-picker-month-cell-spacing-y;

    button {
      width: auto;
      padding: 0 @dls-date-picker-month-cell-padding-x;
    }
  }

  &-year-table {
    border-spacing: 0 @dls-date-picker-year-cell-spacing-y;
    button {
      width: auto;
      padding: 0 @dls-date-picker-year-cell-padding-x;
    }
  }

  &-aux button {
    color: @dls-date-picker-cell-font-color-aux;
    background-color: @dls-date-picker-cell-background-color-aux;

    &:hover {
      background-color: @dls-date-picker-cell-background-color-aux-hover;
    }

    &.focus-visible {
      background-color: @dls-date-picker-cell-background-color-aux-focus;
    }

    &:active {
      background-color: @dls-date-picker-cell-background-color-aux-active;
    }
  }

  &-month-table &-current button,
  &-year-scroller &-current button,
  &-today button {
    color: @dls-date-picker-cell-font-color-current;
    font-weight: @dls-font-weight-3;
  }

  // in-range
  &-in-range {
    position: relative;
    button {
      background-color: @dls-date-picker-cell-background-color-range-end-hover;
      border-radius: 0;
    }
  }

  &-in-range&-range-start {
    background-color: transparent;
    button {
      .border-left-radius(@dls-date-picker-cell-border-radius-m);
    }
  }

  &-in-range&-range-end {
    background-color: transparent;
    button {
      .border-right-radius(@dls-date-picker-cell-border-radius-m);
    }
  }

  &-in-range&-action-end button {
    &:hover {
      background-color: @dls-date-picker-cell-background-color-range-end-hover;
      border-color: @dls-date-picker-cell-border-color-range-end-hover;
      color: @dls-date-picker-cell-font-color;
    }
    &.focus-visible {
      background-color: @dls-date-picker-cell-background-color-range-end-focus;
    }
    &:active {
      color: @dls-date-picker-cell-font-color;
      background-color: @dls-date-picker-cell-background-color-range-end-active;
    }
  }

  &-range {
    td {
      position: relative;
      &::before {
        content: "";
        display: block;
        .size(100%);
        .absolute(0, _, _, _);
        background-color: @dls-background-color-base-1;
      }
    }
  }

  &-range &-table button {
    position: relative;
  }

  &-in-range:not(&-range-single)::before {
    background-color: @dls-date-picker-cell-background-color-range-end-hover;
  }

  &-date-table {
    td::before {
      width: @dls-date-picker-day-cell-spacing-x;
      right: -@dls-date-picker-day-cell-spacing-x;
      .veui-button-transition();
    }
  }
  &-range-end,
  &-in-range:last-child {
    .@{veui-prefix}-calendar-date-table &::before {
      background-color: @dls-background-color-base-1;
    }
  }

  &-range-start,
  &-range-end,
  &-in-range:first-child,
  &-in-range:last-child {
    .@{veui-prefix}-calendar-month-table &::before,
    .@{veui-prefix}-calendar-year-table &::before {
      width: 50%;
    }
  }

  &-range-start,
  &-in-range:first-child {
    .@{veui-prefix}-calendar-month-table &::before,
    .@{veui-prefix}-calendar-year-table &::before {
      right: 0;
    }
  }
  &-range-start&-range-end,
  &-range-start:last-child,
  &-range-end:first-child {
    .@{veui-prefix}-calendar-month-table &::before,
    .@{veui-prefix}-calendar-year-table &::before {
      background-color: @dls-background-color-base-1;
    }
  }

  &-month-table &-range-end:not(&-range-start),
  &-year-table &-range-end:not(&-range-start) {
    &::before {
      left: 0;
    }
  }

  &-year-scroller {
    .size(@dls-date-picker-year-scroller-width, 100%);
    padding: @dls-date-picker-list-padding-y 0 0 0;
    border-right: 1px solid @dls-date-picker-panel-separator-color;
    overflow: auto;
    list-style-type: none;
    margin: 0;

    button {
      padding-left: @dls-date-picker-list-item-padding-x;
      background-color: @dls-date-picker-list-background-color;
      border: none;
      font-weight: @dls-date-picker-list-font-weight;
      .centered-line(@dls-date-picker-list-item-height-m);
      color: @dls-date-picker-list-font-color;
      margin: 0 0 @dls-date-picker-list-item-spacing 0;
      outline: none;
      width: 100%;
      text-align: left;
      cursor: pointer;

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

  &-year-scroller &-selected {
    button {
      color: @dls-date-picker-list-font-color-selected;
      font-weight: @dls-date-picker-list-font-weight-selected;
      background-color: @dls-date-picker-list-background-color-selected;

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

      &.focus-visible {
        color: @dls-date-picker-list-font-color-selected-focus;
      }

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

  &[ui~="s"] {
    font-size: @dls-date-picker-font-size-s;
    .make-date-panel-width(@dls-date-picker-cell-width-s);
    .@{veui-prefix}-calendar-panel {
      .size(@date-panel-width, auto);
      & + .@{veui-prefix}-calendar-panel {
        width: dls-sum(@date-panel-width, @dls-date-picker-range-panel-spacing);
      }
      &::before {
        .make-header-height(@dls-date-picker-font-size-s);
        .absolute(dls-sum(@header-height, -1px), 0, _, 0);
      }
    }
    &.@{veui-prefix}-calendar-type-month .@{veui-prefix}-calendar-panel,
    &.@{veui-prefix}-calendar-type-year .@{veui-prefix}-calendar-panel,
    &.@{veui-prefix}-calendar-type-year .@{veui-prefix}-date-picker-inputs {
      width: dls-sum(@date-panel-width, -@dls-date-picker-year-scroller-width);
    }

    &.@{veui-prefix}-calendar-type-year .@{veui-prefix}-calendar-panel,
    &.@{veui-prefix}-calendar-type-month .@{veui-prefix}-calendar-panel {
      & + .@{veui-prefix}-calendar-panel {
        width: dls-sum(
          @date-panel-width,
          -@dls-date-picker-year-scroller-width,
          @dls-date-picker-range-panel-spacing
        );
      }
    }
  }

  &[ui~="s"] &-table button {
    .size(auto, @dls-date-picker-cell-height-s);
    border-radius: @dls-date-picker-cell-border-radius-s;
  }
  &[ui~="s"] &-date-table button {
    .size(@dls-date-picker-cell-width-s, @dls-date-picker-cell-height-s);
  }

  &[ui~="s"] &-in-range button {
    border-radius: 0;
  }

  &[ui~="s"] &-in-range&-range-start button {
    .border-left-radius(@dls-date-picker-cell-border-radius-s);
  }

  &[ui~="s"] &-in-range&-range-end button {
    .border-right-radius(@dls-date-picker-cell-border-radius-s);
  }

  &[ui~="s"] &-year-scroller {
    button {
      .centered-line(@dls-date-picker-list-item-height-s);
    }
  }

  &-type-date[ui~="s"] &-body {
    .make-day-body-height(
      @dls-date-picker-font-size-s,
      @dls-date-picker-cell-height-s
    );
    height: @day-body-height;
  }

  &-type-month[ui~="s"] &-body {
    .make-month-body-height(
      @dls-date-picker-font-size-s,
      @dls-date-picker-cell-height-s
    );
    height: @month-body-height;
  }

  &-type-year[ui~="s"] &-body {
    .make-year-body-height(
      @dls-date-picker-font-size-s,
      @dls-date-picker-cell-height-s
    );
    height: @year-body-height;
  }
}