@use '@style/theme/index.scss' as theme;
@use '@style/theme/index.scss' as global;
@use 'sass:string';
@use 'sass:meta';
@use '@components/_components/picker/style/index.scss' as *;
@use '@components/date-picker/style/token.scss' as *;

$picker-prefix-cls: string.unquote('#{theme.$prefix}-picker');

.#{theme.$prefix}-picker-container,
.#{theme.$prefix}-picker-range-container {
  box-sizing: border-box;
  min-height: 60px;
  overflow: hidden;
  background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-popup'));
  border: 1px solid $picker-panel-color-border;
  border-radius: $picker-container-border-radius;
  box-shadow: theme.$popup-box-shadow-base;

  &-shortcuts-placement-left,
  &-shortcuts-placement-right {
    display: flex;
    align-items: flex-start;

    > .#{theme.$prefix}-picker-shortcuts {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 5px 8px;
      overflow: hidden auto;

      > * {
        margin: 5px 0;
      }
    }
  }

  &-shortcuts-placement-left {
    .#{$picker-prefix-cls}-panel-wrapper,
    .#{$picker-prefix-cls}-range-panel-wrapper {
      border-left: 1px solid $picker-panel-color-border;
    }
  }

  &-shortcuts-placement-right {
    .#{$picker-prefix-cls}-panel-wrapper,
    .#{$picker-prefix-cls}-range-panel-wrapper {
      border-right: 1px solid $picker-panel-color-border;
    }
  }
}

// panel only
.#{theme.$prefix}-picker-container-panel-only,
.#{theme.$prefix}-picker-range-container-panel-only {
  box-shadow: none;
}
.#{theme.$prefix}-picker-container-panel-only .#{theme.$prefix}-panel-date-inner,
.#{theme.$prefix}-picker-range-container-panel-only .#{theme.$prefix}-panel-date-inner {
  width: 100%;
}
.#{theme.$prefix}-picker-range-container-panel-only .#{theme.$prefix}-panel-date {
  width: 100%;
}

.#{$picker-prefix-cls} {
  &-header {
    display: flex;
    padding: 8px 16px;
    border-bottom: 1px solid $picker-panel-color-border;

    &-title {
      flex: 1;
      color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
      font-size: 14px;
      line-height: 24px;
      text-align: center;
    }

    &-icon {
      width: 24px;
      height: 24px;
      margin-right: 2px;
      margin-left: 2px;
      color: $picker-color-switch-icon;
      font-size: 12px;
      line-height: 24px;
      text-align: center;
      background-color: $picker-color-bg-switch-icon;
      border-radius: 50%;
      transition: background-color theme.$transition-duration-1
        theme.$transition-timing-function-standard;
      user-select: none;
    }

    &-icon:not(#{&}-icon-hidden) {
      cursor: pointer;

      &:hover {
        background-color: $picker-color-bg-switch-icon_hover;
      }
    }

    &-label {
      padding: 2px;
      border-radius: 2px;
      cursor: pointer;
      transition: background-color theme.$transition-duration-1;

      &:hover {
        background-color: $picker-panel-color-bg-label_hover;
      }
    }
  }

  &-body {
    padding: 14px 16px;
  }

  &-week-list {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 14px 16px 0;

    &-item {
      flex: 1;
      height: 32px;
      padding: 0;
      color: #7d7d7f;
      font-weight: 400;
      line-height: 32px;
      text-align: center;
    }
  }

  &-row {
    display: flex;
    padding: 2px 0;
  }

  &-cell {
    flex: 1;
  }

  &-cell &-date {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: $picker-panel-cell-padding-vertical 0;
    cursor: pointer;
  }

  &-date-value {
    min-width: $picker-panel-cell-circle-height;
    height: $picker-panel-cell-circle-height;
    color: $picker-color-cell-text-not-in-view;
    font-size: 14px;
    line-height: $picker-panel-cell-circle-height;
    text-align: center;
    border-radius: $picker-panel-border-radius-cell_selected;
    cursor: pointer;
  }

  &-cell-in-view &-date-value {
    color: $picker-color-cell-text-in-view;
    font-weight: $picker-cell-font-weight-in-view;
  }

  &-cell-selected &-date-value {
    color: $picker-panel-color-text-cell_selected;
    background-color: $picker-panel-color-bg-cell_selected;
    transition: background-color theme.$transition-duration-1
      theme.$transition-timing-function-standard;
  }

  &-cell-in-view:not(
      &-cell-selected,
      &-cell-range-start,
      &-cell-range-end,
      &-cell-disabled,
      &-cell-week
    )
    &-date-value:hover {
    color: $picker-panel-color-text-cell_hover;
    background-color: $picker-panel-color-bg-cell_hover;
  }

  &-cell-today {
    position: relative;

    &::after {
      position: absolute;
      bottom: -2px;
      left: 50%;
      display: block;
      width: 4px;
      height: 4px;
      margin-left: -2px;
      background-color: $picker-panel-color-current-time-dot;
      border-radius: 50%;
      content: '';
    }
  }

  &-cell-in-range &-date {
    background-color: $picker-color-bg-cell-in-range;
  }

  &-cell-range-start &-date {
    border-top-left-radius: $picker-panel-cell-boundary-border-radius;
    border-bottom-left-radius: $picker-panel-cell-boundary-border-radius;
  }

  &-cell-range-end &-date {
    border-top-right-radius: $picker-panel-cell-boundary-border-radius;
    border-bottom-right-radius: $picker-panel-cell-boundary-border-radius;
  }

  &-cell-in-range-near-hover &-date {
    border-radius: 0;
  }

  &-cell-range-start &-date-value,
  &-cell-range-end &-date-value {
    color: $picker-color-text-cell-range-boundary;
    background-color: $picker-color-bg-cell-range-boundary;
    border-radius: $picker-panel-border-radius-cell_selected;
  }

  &-cell-hover-in-range &-date {
    background-color: $picker-color-bg-cell-hover-in-range;
  }

  &-cell-hover-range-start &-date {
    border-radius: $picker-panel-cell-boundary-border-radius 0 0
      $picker-panel-cell-boundary-border-radius;
  }

  &-cell-hover-range-end &-date {
    border-radius: 0 $picker-panel-cell-boundary-border-radius
      $picker-panel-cell-boundary-border-radius 0;
  }

  &-cell-hover-range-start &-date-value,
  &-cell-hover-range-end &-date-value {
    color: $picker-color-text-cell-hover-range-boundary;
    background-color: $picker-color-bg-cell-hover-range-boundary;
    border-radius: 50%;
  }

  &-cell-disabled &-date {
    background-color: $picker-color-bg-cell-disabled;
    cursor: not-allowed;
  }

  &-cell-disabled &-date-value {
    color: $picker-color-cell-text-not-in-view;
    background-color: global.$color-transparent;
    cursor: not-allowed;
  }

  // Footer
  &-footer {
    width: min-content;
    min-width: 100%;

    &-btn-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 3px 8px;
      border-top: 1px solid $picker-panel-color-border;

      & :only-child {
        margin-left: auto;
      }
    }

    &-extra-wrapper {
      box-sizing: border-box;
      padding: 8px 24px;
      color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
      font-size: 12px;
      border-top: 1px solid $picker-panel-color-border;
    }

    &-now-wrapper {
      box-sizing: border-box;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border-top: 1px solid $picker-panel-color-border;
    }
  }

  &-btn-confirm {
    margin: 5px 0;
  }

  &-shortcuts {
    flex: 1;

    & > * {
      margin: 5px 10px 5px 0;
    }
  }
}

@include meta.load-css('./date.scss');
@include meta.load-css('./month.scss');
@include meta.load-css('./year.scss');
@include meta.load-css('./week.scss');
@include meta.load-css('./quarter.scss');
@include meta.load-css('./range.scss');
@include meta.load-css('./shortcuts.scss');