@mixin extend-item-theme() {
  &.holiday {
    color: $ax6ui-calendar-sun-text-color;
  }
}

// mixins --------------------------------------------- end

@include keyframes(ax6-ui-calendar-fadeout) {
  from {
    opacity: 1.0;
  }
  to {
    opacity: 0.5;
  }
}

@include keyframes(ax6-ui-calendar-fadein) {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1.0;
  }
}

[data-ax6ui-calendar] {
  box-sizing: border-box;
  * {
    box-sizing: border-box;
  }
  position: relative;
  .calendar-control {
    position: relative;
    box-sizing: content-box;
    @include ax-background($ax6ui-calendar-control-bg);
    border: $ax6ui-calendar-control-border;
    border-radius: $ax6ui-calendar-control-border-radius;
    font-size: $ax6ui-calendar-control-font-size;
    margin-bottom: 5px;
    padding: $ax6ui-calendar-control-padding;

    .date-move-left, .date-move-right {
      display: block;
      position: absolute;
      overflow: hidden;

      text-align: center;
      font-size: ceil($ax6ui-calendar-control-font-size * 1.2);
      cursor: pointer;
      text-decoration: none;
      padding: $ax6ui-calendar-control-padding;
      i, span {
        line-height: inherit;
      }
    }

    .date-move-left {
      left: 0px;
      top: 0px;
    }
    .date-move-right {
      right: 0px;
      top: 0px;
    }
    .date-display {
      text-align: center;
      [data-calendar-display] {
        margin: 0px 10px;
        cursor: pointer;
        text-decoration: underline;
      }
    }

    color: $ax6ui-calendar-control-text-color;
    a {
      color: $ax6ui-calendar-control-text-color;
    }
    a:hover {
      color: $ax6ui-calendar-control-hover-text-color;
    }
  }
  .calendar-body {
    &.fadein {
      @include animation($ax6ui-calendar-body-animation-in 0.3s $ease-out-sine);
      opacity: 1.0;
    }
    &.fadeout {
      @include animation($ax6ui-calendar-body-animation-out 0.3s $ease-out-sine);
      opacity: 0.0;
    }

    table {
      box-sizing: border-box;
      table-layout: fixed;
      border-collapse: collapse;
      border-spacing: 0;
      border: 0 none;
      thead {
        border: 0 none;
        td, th {
          box-sizing: border-box;
          vertical-align: middle;
          line-height: 1em;
          cursor: pointer;
          text-align: center;
          font-size: $ax6ui-calendar-header-font-size;
          padding: $ax6ui-calendar-header-padding;
          border: $ax6ui-calendar-header-border;
          overflow: hidden;
          @include ax-background($ax6ui-calendar-header-bg);

          color: $ax6ui-calendar-live-text-color;
          &.calendar-col-0 {
            color: $ax6ui-calendar-sun-text-color;
          }
          &.calendar-col-6 {
            color: $ax6ui-calendar-sat-text-color;
          }
        }
      }
      tbody {
        border: 0 none;
        td, th {
          box-sizing: border-box;
          vertical-align: middle;
          line-height: 1em;
          cursor: pointer;
          text-align: center;
          font-size: $ax6ui-calendar-body-font-size;

          border: $ax6ui-calendar-body-border;
          @include ax-background($ax6ui-calendar-body-bg);

          overflow: hidden;
          .calendar-item-day {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            vertical-align: middle;
            border-radius: $ax6ui-calendar-item-day-radius;
            overflow: hidden;
            line-height: inherit;
            @include ax-background($ax6ui-calendar-date-bg);
            color: $ax6ui-calendar-date-text-color;
            font-size: $ax6ui-calendar-body-font-size;

            span.addon {
              position: absolute;
              width: 100%;
              text-align: center;
              line-height: $ax6ui-calendar-body-font-size * 0.8;
              font-size: $ax6ui-calendar-body-font-size * 0.8;

              &.addon-header {
                left: 0px;
                top: 1px;
              }
              &.addon-footer {
                left: 0px;
                bottom: 1px;
              }
            }

            &.live {
              @include ax-background($ax6ui-calendar-live-bg);
              color: $ax6ui-calendar-live-text-color;
              span.addon {
                color: #A1A1A1;
              }
              &.sunday {
                color: $ax6ui-calendar-sun-text-color;
              }
              &.saturday {
                color: $ax6ui-calendar-sat-text-color;
              }
            }
            &.focus {
              @include ax-background($ax6ui-calendar-focus-bg);
              color: $ax6ui-calendar-focus-text-color;
              span.addon {
                color: $ax6ui-calendar-focus-text-color;
              }
              &.hover {
                @include ax-background($ax6ui-calendar-hover-bg);
                color: $ax6ui-calendar-hover-text-color !important;
                span.addon {
                  color: $ax6ui-calendar-hover-text-color;
                }
              }
            }
            &.period {
              @include ax-background($ax6ui-calendar-period-bg);
              color: $ax6ui-calendar-period-text-color !important;
              span.addon {
                color: $ax6ui-calendar-period-text-color;
              }
            }
            &.selected-day {
              @include ax-background($ax6ui-calendar-hover-bg);
              color: $ax6ui-calendar-hover-text-color !important;
              span.addon {
                color: $ax6ui-calendar-hover-text-color;
              }
            }
            &.disable {
              @include ax-background($ax6ui-calendar-date-bg);
              color: lighten($ax6ui-calendar-date-text-color, 10%);
            }

            @include extend-item-theme();
          }
          .calendar-item-month {
            display: block;
            width: 100%;
            height: 100%;
            vertical-align: middle;
            border-radius: $ax6ui-calendar-item-month-radius;
            overflow: hidden;
            line-height: inherit;
            @include ax-background($ax6ui-calendar-date-bg);
            color: $ax6ui-calendar-date-text-color;
            font-size: $ax6ui-calendar-body-font-size;

            &.live {
              @include ax-background($ax6ui-calendar-live-bg);
              color: $ax6ui-calendar-live-text-color;
            }
            &.hover {
              @include ax-background($ax6ui-calendar-hover-bg);
              color: $ax6ui-calendar-hover-text-color;
            }
            &.focus {
              @include ax-background($ax6ui-calendar-focus-bg);
              color: $ax6ui-calendar-focus-text-color;
            }
            &.selected-month {
              @include ax-background($ax6ui-calendar-hover-bg);
              color: $ax6ui-calendar-hover-text-color !important;
              span.addon {
                color: $ax6ui-calendar-hover-text-color;
              }
              span.lunar {
                color: $ax6ui-calendar-hover-text-color;
              }
            }
            &.disable {
              @include ax-background($ax6ui-calendar-date-bg);
              color: lighten($ax6ui-calendar-date-text-color, 10%);
            }
            @include extend-item-theme();
          }
          .calendar-item-year {
            display: block;
            width: 100%;
            height: 100%;
            vertical-align: middle;
            border-radius: $ax6ui-calendar-item-year-radius;
            overflow: hidden;
            line-height: inherit;
            @include ax-background($ax6ui-calendar-date-bg);
            color: $ax6ui-calendar-date-text-color;
            font-size: $ax6ui-calendar-body-font-size;

            &.live {
              @include ax-background($ax6ui-calendar-live-bg);
              color: $ax6ui-calendar-live-text-color;
            }
            &.hover {
              @include ax-background($ax6ui-calendar-hover-bg);
              color: $ax6ui-calendar-hover-text-color;
            }
            &.focus {
              @include ax-background($ax6ui-calendar-focus-bg);
              color: $ax6ui-calendar-focus-text-color;
            }
            &.selected-year {
              @include ax-background($ax6ui-calendar-hover-bg);
              color: $ax6ui-calendar-hover-text-color !important;
              span.addon {
                color: $ax6ui-calendar-hover-text-color;
              }
              span.lunar {
                color: $ax6ui-calendar-hover-text-color;
              }
            }
            &.disable {
              @include ax-background($ax6ui-calendar-date-bg);
              color: lighten($ax6ui-calendar-date-text-color, 10%);
            }
            @include extend-item-theme();
          }

          /*
          &.calendar-col-0 {
              .calendar-item-day.live {
                  color: $ax6ui-calendar-sun-text-color;
                  @include extend-item-theme();
              }
          }
          &.calendar-col-6 {
              .calendar-item-day.live {
                  color: $ax6ui-calendar-sat-text-color;
                  @include extend-item-theme();
              }
          }
          */

        }
      }
    }
  }

}