@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;

@include b(picker-panel) {
  color: getCssVarWebex('text', 'primary', 'normal');
  border-color: getCssVarWebex('outline', 'secondary', 'normal');
  background-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
  border-radius: getCssVarWebexCom('border', 'radius', 'core', 'medium');
  @include e(shortcut) {
    color: getCssVarWebex('text', 'primary', 'normal');
    &:hover,
    &:focus {
      color: getCssVarWebex('text', 'accent', 'normal');
      border-color: getCssVarWebex('text', 'accent', 'normal');
    }
  }
  @include e(icon-btn) {
    color: getCssVarWebex('text', 'primary', 'normal');
    &:hover {
      color: var(--datepicker-text-hover-color);
    }
  }
}
.el-picker-panel__sideborder {
  border-color: getCssVarWebex('outline', 'secondary', 'normal');
}
.el-picker-panel__body {
  background-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
}
.time-select-item {
  border-color: getCssVarWebex('outline', 'secondary', 'normal');
  margin: getCssVarWebexCom('spacing', 'core', 'xx', 'small');
  border-radius: getCssVarWebexCom('border', 'radius', 'core', 'medium');
}

.time-select-item.selected:not(.disabled) {
  color:getCssVarWebex('text', 'primary', 'normal');
  background-color: getCssVarWebex('background', 'primary', 'hover');

  &:hover {
    color:getCssVarWebex('text', 'primary', 'normal');
    background-color: getCssVarWebex('background', 'primary', 'active');
  }
}

.time-select-item.disabled {
  color:getCssVarWebex('text', 'primary', 'disabled');
}

.time-select-item:hover {
  color:getCssVarWebex('text', 'primary', 'normal');
  background-color: getCssVarWebex('background', 'primary', 'active');
}

@include b(date-table) {
  th {
    color: getCssVarWebex('text', 'secondary', 'normal');
  }
  td {
    & .datepicker-day-btn{
      width: 30px;
      height: 30px;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      border: none;
      line-height: 30px;
      &.with-dot {
        &::after {
          background-color:  getCssVarWebex('background', 'accent', 'normal');
        }
      }
    }

    &.next-month,
    &.prev-month {
      color: getCssVarWebex('text', 'primary', 'disabled');
    }

    &.today {
      color: getCssVarWebex('text', 'accent', 'normal');
      &:before {
      }
      :hover {
      }
      .datepicker-day-btn{
      }
    }
    &.available {
      font-weight: bold;
    }
    &.available.selected {

    }
    &.hover,& .start-date.hover,& .end-date.hover,
    &.available:hover {
      background-color: getCssVarWebex('background', 'primary', 'hover')!important;
    }
    &.available.today:hover {
      background-color: getCssVarWebex('background', 'accent', 'normal')!important;
    }
    &.available.in-range:hover {
      background-color: getCssVarWebex('background', 'accent', 'normal')!important;
    }
    &.available.in-range.start-date:hover {
      background-color: getCssVarWebex('background', 'accent', 'normal')!important;
    }
    &.available.in-range.end-date:hover {
      background-color: getCssVarWebex('background', 'accent', 'normal')!important;
    }
    &.available.in-range.end-date.start-date:hover {
      background-color: getCssVarWebex('background', 'accent', 'normal')!important;
    }
    &.in-range {
      background-color: getCssVarWebex('background', 'accent', 'normal')!important;
      color:getCssVarWebex('common', 'text', 'white')!important;
      &:hover {

      }
    }
    &.available.in-range.hover {

    }
    &.current:not(.disabled),
    &.start-date{
      background-color: getCssVarWebex('background', 'accent', 'normal')!important;
      color:getCssVarWebex('common', 'text', 'white')!important;
      &.today{
        background-color: getCssVarWebex('background', 'accent', 'normal')!important;
      }
    }
  &.start-date.in-range{
  }
    &.end-date {
      background-color: getCssVarWebex('background', 'accent', 'normal')!important;
      color:getCssVarWebex('common', 'text', 'white')!important;
    }
    &.start-date.end-date {

    }
    &.disabled {

    }

    &.week {

    }
  }
}
