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

@include b(calendar) {
  color: $--calendar-color;
  border: 1px solid $--calendar-border-color;
  /*box-shadow: 0 2px 6px #ccc;*/
  background: $--color-white;
  border-radius: 2px;
  line-height: 20px;
  margin: 5px 0;
  @include e(body) {
    &::after {
      content: "";
      display: table;
      clear: both;
    }
  }
  @include e(body-wrapper) {
    &::after {
      content: "";
      display: table;
      clear: both;
    }
  }
  @include e(content) {
    position: relative;
    margin: $--calendar-panel-margin;
  }
  @include e(footer) {
    border-top: 1px solid $--calendar-inner-border-color;
    padding: 4px;
    text-align: right;
    background-color: $--color-white;
    position: relative;
  }
  @include e(month-tab) {
    padding: $--calendar-month-tab-padding;
    box-sizing: border-box;
    & .tab-item {
      display: inline-block;
      text-align: center;
      box-sizing: border-box;
      font-size: $--calendar-month-tab-font-size;
      height: $--calendar-month-tab-height;
      line-height: $--calendar-month-tab-height;
      cursor:pointer;
      border: 1px solid transparent;
      border-bottom: 1px solid rgb(209, 219, 229);
      @include when(active) {
        border: 1px solid rgb(209, 219, 229);
        border-bottom-color: #fff;
        border-radius: 4px 4px 0 0;
      }
    }
  }
  @include e(btn) {
    border: 1px solid #dcdcdc;
    color: #333;
    line-height: 24px;
    border-radius: 2px;
    padding: 0 20px;
    cursor: pointer;
    background-color: transparent;
    outline: none;
    font-size: 12px;

    &[disabled] {
      color: #cccccc;
      cursor: not-allowed;
    }
  }
  @include e(icon-btn) {
    font-size: 12px;
    color: $--calendar-icon-color;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
    margin-top: 8px;

    &:hover {
      color: $--calendar-text-hover-color;
    }
  }
  @include e(link-btn) {
    cursor: pointer;
    color: $--color-primary;
    text-decoration: none;
    padding: 15px;
    font-size: 12px;
  }
  /*date-picker*/
  &.has-sidebar.has-time {
    min-width: 434px;
  }
  &.has-sidebar {
    min-width: 370px;
  }
  &.has-time {
    min-width: 324px;
  }
  .el-picker-panel__content {
    min-width: 224px;
  }
  table {
    table-layout: fixed;
    width: 100%;
  }
  @include e(editor-wrap) {
    position: relative;
    display: table-cell;
    padding: 0 5px;
  }
  @include e(time-header) {
    position: relative;
    border-bottom: 1px solid $--calendar-inner-border-color;
    font-size: 12px;
    padding: 8px 5px 5px 5px;
    display: table;
    width: 100%;
    box-sizing: border-box;
  }
  @include e(header) {
    margin: 12px;
    text-align: center;
    @include when(tab) {
      .el-calendar__header-year{
        margin-bottom: $--calendar-panel-margin;
        & .el-calendar__header-label{

          font-size: 16px;
        }
      }
      .el-calendar__header-month{
        position: relative;
      }
      .el-calendar__tab-prev,
      .el-calendar__tab-next{
        position: absolute;
        top:0;
      }
      .el-calendar__tab-prev{
        left:0;
      }
      .el-calendar__tab-next{
        right:0;
      }
    }
  }
  @include e(header-label) {
    font-size: 14px;
    padding: 0 5px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    &:hover {
      color: $--calendar-text-hover-color;
    }

    &.active {
      color: $--calendar-active-color;
    }
  }
  @include e(prev-btn) {
    float: left;
  }
  @include e(next-btn) {
    float: right;
  }
  @include e(time-wrap) {
    padding: 10px;
    text-align: center;
  }
  @include e(time-label) {
    float: left;
    cursor: pointer;
    line-height: 30px;
    margin-left: 10px;
  }
  @include e(date) {
    text-align: left;
    margin: 0 4px;
    display: block;
    height: 116px;
    padding: $--calendar-cell-padding;
    border-top: 2px solid $--calendar-inner-border-color;
    -webkit-transition: background .3s;
    transition: background .3s;
    box-sizing: border-box;
    & .date-almanac{
      float: right;
      color: $--color-primary;
    }
  }
  @include e(date-scroll) {
    height: 90px;
  }
  @include e(date-content) {
    height: 90px;
  }
}

/*原el-date-table*/
@include b(calendar-table) {
  font-size: 12px;
  width: 100%;
  user-select: none;

  @include when(week-mode) {
    .el-date-table__row {
      &:hover {
        & .el-calendar__date{;
          background-color: $--calendar-cell-hover-color;
          border-top-color:$--calendar-inrange-color;
        }
      }

      &.current {
        & .el-calendar__date{
          background-color: $--calendar-inrange-color;
          border-top-color:$--calendar-inrange-color;
        }
      }
    }
  }

  td {
    size: $--calendar-td-size;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;

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

    &.today {
      /*color: $--calendar-text-hover-color);*/
      position: relative;
      & .el-calendar__date{
        border-top-color:$--calendar-active-color;
      }
      & .el-calendar__date-value {
        color: $--calendar-text-hover-color;
      }
      /*  &:before {
           content: " ";
           position: absolute;
           top: 0px;
           right: 4px;
           width: 0;
           height: 0;
           border-top: 0.5em solid $--calendar-active-color;
           border-left: .5em solid transparent;
         }*/
    }

    &.available:hover {
      background-color: $--calendar-cell-hover-color;
    }

    &.in-range {
      background-color: $--calendar-inrange-color;
      &:hover {
        background-color: $--calendar-inrange-hover-color;
      }
    }

    &.current:not(.disabled),
    &.start-date,
    &.end-date {
      & .el-calendar__date{
        background-color: $--calendar-inrange-color !important;
      }
      & .el-calendar__date-value{
        color: $--calendar-active-color;
      }
    }

    &.disabled {
      background-color: #f4f4f4;
      opacity: 1;
      cursor: not-allowed;
      color: #ccc;
    }

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

  th {
    padding: 5px;
    color: $--calendar-header-color;
    font-weight: 400;
  }
}

.el-calendar *[slot=sidebar],
.el-calendar__sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  border-right: 1px solid $--calendar-inner-border-color;
  box-sizing: border-box;
  padding-top: 6px;
  background-color: #f00;
}

.el-calendar *[slot=sidebar] + .el-calendar__body,
.el-calendar__sidebar + .el-calendar__body {
  margin-left: 110px;
}