@import "../common/varible";
@import "../common/animation";

.yu-date-picker-option {
  font-family: $font-family;
  display: inline-block;
  width: $date-picker-width;
  & > .head {
    text-align: center;
    & > a {
      display: inline-block;
      padding: $space-small;
      &:hover {
        color: $primary;
        cursor: pointer;
      }
    }
    & > div {
      display: inline-block;
      padding: $space-small;
      font-size: $normal;
      & > span:hover {
        color: $primary;
        cursor: pointer;
      }
    }
    & > .left {
      float: left;
    }
    & > .right {
      float: right;
    }
  }
  background-color: #fff;
  border: 1px solid $border;
  padding: $space;
  border-radius: $radius;
  color: $text;
  box-shadow: $box-shadow;
  & > table.date {
    width: 100%;
    margin: 0 auto;
    & > thead {
      & > tr {
        & > th {
          border-bottom: 1px solid $border;
          font-size: $normal;
          width: 40px;
          height: 40px;
          font-weight: normal;
          color: $text;
        }
      }
    }
    & > tbody {
      & > tr td {
        text-align: center;
        font-size: $normal;
        width: 40px;
        height: 40px;
        font-weight: normal;
        color: $text;
        vertical-align: middle;
        &:hover:not(.other-month):not(.disabled) {
          color: $primary;
          cursor: pointer;
        }
        &.other-month {
          color: $text-lighter;
        }
        &.current-day {
          color: $primary;
          font-weight: bold;
        }
        &.active:not(.disabled) {
          & > div {
            display: inline-block;
            text-align: center;
            line-height: 24px;
            width: 24px;
            height: 24px;
            background-color: $primary;
            border-radius: 100%;
            color: #fff;
          }
        }
        &.disabled {
          color: $text-lighter;
          cursor: not-allowed;
        }
      }
    }
    &.month, &.year {
      & > tbody {
        & > tr td {
          width: 80px;
          height: 60px;
          &.active:not(.disabled) {
            & > div {
              width: 80px;
              height: 60px;
              border-radius: 0;
              background-color: #fff;
              line-height: 60px;
              font-weight: bold;
              color: $primary;
            }
          }
          &.disabled {
            color: $text-lighter;
            cursor: not-allowed;
          }
        }
      }
    }
  }
}