/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin el-calendar-kit-theme() {

  el-calendar-header {
    .header {
      display: flex;
      flex-direction: column;

      color: el-theme(calendar-header-text-color);
      font-family: el-theme(calendar-header-text-font-family);
    }

    .title {
      display: flex;
      align-items: center;
      font-size: el-theme(calendar-header-title-text-font-size);
      font-weight: el-theme(calendar-header-title-text-font-weight);
      line-height: el-theme(calendar-header-title-text-line-height);

      .el-arrow-dropright {
        margin-left: 0.5rem;
      }

      .el-arrow-dropleft {
        margin-right: 0.5rem;
      }

      &:hover {
        color: el-theme(calendar-cell-hover-background-color);
        cursor: pointer;
      }

      &:active {
        color: el-theme(calendar-cell-active-background-color);
      }
    }

    .sub-title {
      font-size: el-theme(calendar-header-sub-title-text-font-size);
      font-weight: el-theme(calendar-header-sub-title-text-font-weight);
      line-height: el-theme(calendar-header-sub-title-text-line-height);
    }
  }

  el-calendar-navigation button[elButton] {
    width: el-theme(calendar-navigation-button-width);
  }

  el-calendar-week-numbers {
    background: el-theme(calendar-weeknumber-background);
    font-size: el-theme(calendar-weeknumber-text-font-size);
    font-weight: el-theme(calendar-weeknumber-text-font-weight);
    line-height: el-theme(calendar-weeknumber-text-line-height);
    border-right: el-theme(calendar-weeknumber-divider-width) solid el-theme(calendar-weeknumber-divider-color);
    border-top: el-theme(calendar-weeknumber-divider-width) solid el-theme(calendar-weeknumber-divider-color);

    .sign {
      border-bottom: el-theme(calendar-weeknumber-divider-width) solid el-theme(calendar-weeknumber-divider-color);
    }

    &.size-medium {
      .sign,
      .week-cell {
        height: el-theme(calendar-day-cell-height);
      }
    }

    &.size-large {
      .sign,
      .week-cell {
        height: el-theme(calendar-day-cell-large-height);
      }
    }

    .sign,
    .week-cell {
      height: el-theme(calendar-weeknumber-height);
      width: el-theme(calendar-weeknumber-width);
    }


  }

  el-calendar-days-names {
    background: el-theme(calendar-weekday-background);
    border-top: el-theme(calendar-weeknumber-divider-width) solid el-theme(calendar-weeknumber-divider-color);
    border-bottom: el-theme(calendar-weeknumber-divider-width) solid el-theme(calendar-weeknumber-divider-color);

    .day {
      width: el-theme(calendar-weekday-width);
      height: el-theme(calendar-weekday-height);
      color: el-theme(calendar-weekday-text-color);
      font-size: el-theme(calendar-weekday-text-font-size);
      font-weight: el-theme(calendar-weekday-text-font-weight);
      line-height: el-theme(calendar-weekday-text-line-height);

      &.holiday {
        color: el-theme(calendar-weekday-holiday-text-color);
      }
    }
  }

  el-calendar-day-picker {
    &.medium .day-cell {
      width: el-theme(calendar-day-cell-width);
      height: el-theme(calendar-day-cell-height);
    }

    &.large {
      .day-cell {
        width: el-theme(calendar-day-cell-large-width);
        height: el-theme(calendar-day-cell-large-height);
      }
      .day {
        height: el-theme(calendar-weekday-large-height);
        width: el-theme(calendar-weekday-large-width);
      }
    }
  }

  el-calendar-month-picker {
    &.medium .month-cell {
      width: el-theme(calendar-month-cell-width);
      height: el-theme(calendar-month-cell-height);
    }

    &.large .month-cell {
      width: el-theme(calendar-month-cell-large-width);
      height: el-theme(calendar-month-cell-large-height);
    }
  }

  el-calendar-year-picker {
    &.medium .year-cell {
      width: el-theme(calendar-year-cell-width);
      height: el-theme(calendar-year-cell-height);
    }

    &.large .year-cell {
      width: el-theme(calendar-year-cell-large-width);
      height: el-theme(calendar-year-cell-large-height);
    }
  }

  el-calendar-day-picker .day-cell {
    &.bounding-month {
      color: el-theme(calendar-cell-inactive-text-color);
    }

    &:not(.disabled):not(.empty):hover {
      background-color: el-theme(calendar-cell-hover-background-color);
      color: el-theme(calendar-cell-hover-text-color);
      font-size: el-theme(calendar-cell-hover-text-font-size);
      font-weight: el-theme(calendar-cell-hover-text-font-weight);
      line-height: el-theme(calendar-cell-hover-text-line-height);
    }
  }

  el-calendar-week-numbers .week-cell,
  el-calendar-week-numbers .sign,
  el-calendar-day-picker .day-cell,
  el-calendar-month-picker .month-cell,
  el-calendar-year-picker .year-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1px;
  }

  el-calendar-week-numbers .week-cell,
  el-calendar-week-numbers .sign {
    margin-left: 0;
    margin-right: 0;
  }

  el-calendar-day-picker .day-cell,
  el-calendar-month-picker .month-cell,
  el-calendar-year-picker .year-cell {
    font-family: el-theme(calendar-text-font-family);
    font-size: el-theme(calendar-text-font-size);
    font-weight: el-theme(calendar-text-font-weight);
    line-height: el-theme(calendar-text-line-height);

    border-radius: el-theme(calendar-border-radius);
    color: el-theme(calendar-text-color);

    &:not(.empty):not(.disabled) {
      cursor: pointer;
    }

    &.disabled {
      background-color: el-theme(calendar-cell-disabled-background-color);
      color: el-theme(calendar-cell-disabled-text-color);
    }

    &.today {
      background-color: el-theme(calendar-cell-today-background-color);
      color: el-theme(calendar-cell-today-text-color);
      font-size: el-theme(calendar-cell-today-text-font-size);
      font-weight: el-theme(calendar-cell-today-text-font-weight);
      line-height: el-theme(calendar-cell-today-text-line-height);
    }

    &.selected {
      background-color: el-theme(calendar-cell-selected-background-color);
      color: el-theme(calendar-cell-selected-text-color);
      font-size: el-theme(calendar-cell-selected-text-font-size);
      font-weight: el-theme(calendar-cell-selected-text-font-weight);
      line-height: el-theme(calendar-cell-selected-text-line-height);
    }
  }

  el-calendar-month-picker .month-cell,
  el-calendar-year-picker .year-cell {
    &:hover, &:hover:active {
      background-color: el-theme(calendar-cell-hover-background-color);
      color: el-theme(calendar-cell-hover-text-color);
      font-size: el-theme(calendar-cell-hover-text-font-size);
      font-weight: el-theme(calendar-cell-hover-text-font-weight);
      line-height: el-theme(calendar-cell-hover-text-line-height);
    }

    &:active {
      background-color: el-theme(calendar-cell-active-background-color);
      color: el-theme(calendar-cell-active-text-color);
      font-size: el-theme(calendar-cell-active-text-font-size);
      font-weight: el-theme(calendar-cell-active-text-font-weight);
      line-height: el-theme(calendar-cell-active-text-line-height);
    }
  }
}