@import (optional, reference) '../../style/themes/index';
@modal-prefix-cls: ~'@{mega-prefix}-calendar';
.@{modal-prefix-cls} {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: @d1;
  user-select: none;
  .icon {
    &:hover {
      color: @primary-color;
    }
  }
  &-cheader {
    display: flex;
    justify-content: space-between;
    padding: 0 @d1;
    height: 40px;
    align-items: center;
    font-weight: bold;
    .ctime {
      span {
        cursor: pointer;
        &:hover {
          color: @primary-color;
        }
      }
    }
  }
  &-body {
    width: 100%;
    height: 100%;
  }
  &-header {
    text-align: center;
    font-weight: bold;
  }
  &-day {
    cursor: pointer;
    text-align: center;
    color: @mom-maincolor;
    padding: 3px 0;
    .date-wrapper {
      padding: 3px 0;
    }
    .date {
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      margin: 0 auto;
      @media screen and (max-width: 768px) {
        font-size: 12px;
      }
    }
  }
  &-otherDay {
    color: @mom-subcolor;
  }
  &-today {
    color: @primary-color;
  }
  &-currentDay {
    &:hover {
      color: @primary-color;
    }
  }
  &-startDay,
  &-endDay {
    .date {
      background: @primary-color;
      color: @white;
    }
  }
  &-startDay {
    .date-wrapper {
      border-radius: 40px 0 0 40px;
    }
  }
  &-endDay {
    .date-wrapper {
      border-radius: 0 40px 40px 0;
    }
  }
  &-startDay&-endDay {
    .date-wrapper {
      border-radius: 40px;
    }
  }
  &-betweenDay,
  &-startDay,
  &-endDay {
    .date-wrapper {
      background: @mom-lightcolor;
    }
  }
  &-betweenDay {
    .date-wrapper {
      border-radius: 0;
    }
  }
  &-active {
    .date {
      background: @primary-color;
      color: @white;
    }
  }
  &-disableDate {
    cursor: not-allowed;
    .date-wrapper {
      background: @mom-lightcolor;
      color: @mom-subcolor;
    }
  }
  &-ybody {
    .y-item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60px;
      margin: 3px 0;
      cursor: pointer;
      &:hover {
        color: @primary-color;
      }
      &-current {
        color: @primary-color;
        font-weight: bold;
      }
    }
  }
  &-input {
    position: relative;
    .multi-input {
      width: 300px;
      min-height: 30px;
      border-radius: 5px;
      border: 1px solid @input-border-color;
      font-size: 12px;
      display: flex;
      flex-wrap: wrap;
    }
  }
  &-ip {
    // position: absolute;
    // height: 335px;
    width: 290px;
    background: @white;
    transition: all 0.3s;
    transform-origin: bottom;
    // border: 1px solid @mom-subcolor;
    &-hidden {
      opacity: 0;
      height: 0;
    }
  }
  &-footer {
    height: 30px;
    color: @primary-color;
    .footer-container {
      span {
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
        & + span {
          margin-left: @d1;
        }
      }
    }
  }
}