@import "../common/var";
@import "../mixins/mixins";

@include b(date-table) {
  font-size: $--datepicker-font-size-base;
  user-select: none;
  width: 248px;
  margin: 12px 24px 24px;

  .current:hover {
    span {
      background: $--datepicker-active-color!important;
      color: $--color-white!important;
    }
  }

  @include when(week-mode) {
    .el-date-table__row {
      &:hover {
        td:first-child div {
          margin-left: 5px;
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;
        }
        td:last-child div {
          margin-right: 5px;
          border-top-right-radius: 15px;
          border-bottom-right-radius: 15px;
        }
      }

      .cell {
        background: $--datepicker-active-color;
        color: $--datepicker-current-font-color;
        width: $--size-15;
        height: 24px;
        border-radius: $--datepicker-border-radius;
        line-height: 24px;
      }

      &.current div {
        background-color: $--datepicker-inrange-background-color;
      }
    }

    .el-picker-panel__content {
      td {
        &.next-month,
        &.prev-month {
          color: $--datepicker-off-font-color;
        }
      }
    }
  }

  td {
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    position: relative;

    &.next-month,
    &.prev-month {
      color: $--datepicker-off-font-color;
    }

    & div {
      height: 24px;
      padding: 0;
      box-sizing: border-box;
    }

    & span {
      width: 24px;
      height: 24px;
      display: block;
      margin: 0 auto;
      line-height: 24px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      // border-radius: 50%;
      border-radius: $--border-radius-circle;
    }

    &.today {
      position: relative;
      span {
        border: $--border-base;
        color: $--color-text-placeholder;
        line-height: 22px;
      }
      &:not(.disabled) span {
        border: $--border-width-base $--border-style-base $--color-primary;
        color: $--color-text-regular;
        box-sizing: border-box;
      }
      &.start-date span,
      &.end-date span {
        color: $--color-white;
      }
    }

    &.available:not(.in-range) {
      &:hover {
        span:not(.is-active):not(.el-tooltip) {
          background: $--color-secondary;
          color: $--datepicker-font-color;
        }
      }
    }

    &.in-range div {
      // background-color: $--datepicker-inrange-background-color;
      background-color: $--primary-2;
      &:hover {
        // background-color: $--datepicker-inrange-hover-background-color;
        background-color: $--primary-2;
      }
    }

    &.current:not(.disabled) span {
      color: $--color-white;
      background: $--datepicker-active-color;
    }

    &.start-date div,
    &.end-date div {
      color: $--color-white;
    }

    &.start-date span,
    &.end-date span {
      background-color: $--datepicker-active-color;
    }

    &.start-date div {
      margin-left: 7px;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
    }

    &.end-date div {
      margin-right: 7px;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
    }

    &.disabled div {
      // background-color: $--background-color-base;
      background-color: $--color-bg-3;
      opacity: 1;
      cursor: not-allowed;
      color: $--color-text-4;
    }
    &.prev-month div{
      background-color: transparent !important;
    }
    &.next-month div{
      background-color: transparent !important;
    }

    &.selected div {
      margin-left: 5px;
      margin-right: 5px;
      border-radius: 15px;
    }

    &.selected span {
      background-color: $--datepicker-active-color;
      color: $--color-white;
      border-radius: 15px;
      &:hover {
        background-color: $--datepicker-inrange-hover-background-color;
      }
    }

    &.week {
      font-size: 80%;
      color: $--datepicker-header-font-color;
    }
  }

  th {
    padding: 5px;
    color: $--datepicker-th-font-color;
    font-weight: $--font-weight-400;
    // border-bottom: solid 1px $--border-color-lighter;
  }
}

.el-calendar_date {
  width: calc( 25% - 1px );
  padding-bottom: 24px;
  border-left: $--border-base;
  border-bottom: $--border-base;
  th {
    border-bottom: unset;
    color: $--color-text-placeholder;
    width: 32px;
    height: 32px;
  }
  .el-calendar_month_title {
    font-size: $--datepicker-font-size;
    margin: 16px 0 16px 16px;
    font-weight: $--font-weight-500;
    line-height: 24px;
  }
  .el-date-table {
    margin: auto;
    width: 100%;
    padding: 0 18px;
    border-spacing: 0 3px;
    .active-today{
      span {
        border: $--border-width-base $--border-style-base $--color-primary;
        line-height: 22px;
      }
    }
  }

  .available span:hover{
    background-color: $--color-secondary;
  }
  .available{
    .is-active{
      width: 24px;
      height: 24px;
      color: #FFFFFF;
      background-color: $--color-primary;
      &:hover{
        background-color: $--color-primary;
      }
    }
  }
  td {
    &.next-month,
    &.prev-month {
      color: $--datepicker-font-color;
    }
  }
}

.el-calendar_date:first-child {
  .prev-month{
    color: $--datepicker-off-font-color;
  }
}

.el-calendar_date:last-child {
  .next-month{
    color: $--datepicker-off-font-color;
  }
}