@color-default: #fff;
@color-disabled: rgba(0, 0, 0, 0.25);
@bg-default: #fff;
@bg-con: #ccc;
@bg-con-reduce: rgba(@bg-con, 36%);
@border-color-default: #dcdfe6;
@border-radius-default: 4px;
@font-color: #494949;
@font-color-reduce: #949494;
@font-size: 14px;
@shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
@day-px: 12px;
@day-py: 8px;

.m-simple-calendar {
  width: 280px;
  background: @bg-default;
  box-shadow: @shadow;
  transition: 0.3s opacity ease;
  opacity: 0;
  border-radius: @border-radius-default;
  color: @font-color;
  font-size: @font-size;
  position: relative;
  z-index: 100;

  &-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
  }

  &.show {
    opacity: 1;
  }

  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 30px;

    &-box {
      width: 24px;
      height: 24px;
      border-radius: @border-radius-default;
      display: flex;
      justify-content: center;
      align-items: center;
      color: @font-color;
      font-size: @font-size;
      border-radius: @border-radius-default;
      border: 1px solid transparent;

      &.selected {
        background: var(--theme) !important;
        border-color: var(--theme);
        color: @color-default;
      }

      &.today {
        border-color: var(--theme);
      }

      &.disabled {
        color: @color-disabled;
      }

      &.fixed {
        background: transparent !important;
      }
    }

    &:hover {
      .item-box {
        background: @bg-con-reduce;
      }
    }
  }

  .calendar-year {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid @border-color-default;
    padding: 0 @day-py;

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 24px;
      height: 100%;
      image {
        width: 44%;
        height: 44%;
      }
      &.double {
        image {
          width: 70%;
          height: 70%;
        }
      }
    }

    .year-center {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      .month {
        margin-right: @day-py;
      }
    }
  }

  .calendar-week {
    padding: @day-py @day-px 0;
    display: flex;
    align-items: center;
  }

  .calendar-day {
    padding: 0 @day-px @day-py;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
}