
@import '../../styles/variables/default.scss';
@import '../../styles/mixins/index.scss';
.at-calendar {
    overflow: hidden;
  
    /* elements */
    &__header {
      .header__flex {
        @include display-flex;
        @include align-items(center);
  
        height: 72px;
        color: $at-calendar-header-color;
        text-align: center;
  
        &-item {
          @include flex(0 0 calc(100% / 7));
  
          font-size: 30px;
        }
      }
    }
  
    &__list {
      &.flex {
        @include display-flex;
        @include align-items();
        @include flex-wrap(wrap);
  
        color: $at-calendar-day-color;
  
        .flex__item {
          @include flex(0 0 calc(100% / 7));
  
          font-size: 30px;
          text-align: center;
          position: relative;
          margin: 5px 0;
  
          &-container {
            @include align-items(center);
            @include display-flex;
  
            width: $at-calendar-day-size;
            height: $at-calendar-day-size;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
  
            .container-text {
              @include flex;
            }
          }
  
          &-extra {
            .extra-marks {
              position: absolute;
              bottom: 5px;
              line-height: 0;
              left: 50%;
              transform: translateX(-50%);
  
              .mark {
                width: $at-calendar-mark-size;
                height: $at-calendar-mark-size;
                margin-right: 4px;
                display: inline-block;
                background-color: $at-calendar-main-color;
                border-radius: 50%;
                overflow: hidden;
  
                &:last-child {
                  margin-right: 0;
                }
              }
            }
          }
  
          &--today {
            color: $at-calendar-main-color;
            font-weight: bolder;
          }
  
          &--blur {
            color: #e1e4e7;
          }
  
          &--selected {
            color: white;
            background-color: rgba($color: $at-calendar-main-color, $alpha: 1);
  
            &-head {
              border-top-left-radius: 40px;
              border-bottom-left-radius: 40px;
            }
  
            &-tail {
              border-top-right-radius: 40px;
              border-bottom-right-radius: 40px;
            }
  
            /* stylelint-disable-next-line */
            .extra-marks .mark {
              background-color: white;
            }
  
            &-head.flex__item--selected-tail {
              background-color: transparent;
  
              .flex__item-container {
                background-color: rgba($color: $at-calendar-main-color,
                    $alpha: 0.7);
              }
            }
          }
        }
      }
    }
  
    &__controller {
      @include display-flex;
      @include align-items(center);
      @include justify-content(center);
  
      margin-bottom: 20px;
  
      .controller__arrow {
        @include flex(0 0 40px);
  
        height: 40px;
        border-radius: 12px;
        display: inline-block;
        background-size: 16px 24px;
        background-position: center;
        background-color: #f7f8fc;
        background-repeat: no-repeat;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAAXNSR0IArs4c6QAAAnFJREFUOBGVVF1rE0EUnXt3tzFtWmqjKYKfqIhVa1L8FQVRWtwnXwRhidXGDwQf81oCUQMioZRCHwNSgiD4lD9QSYVKsA8KbaW1jbamX8adnWsmMnESbYz7cs6ee8/ZnZm7y9h/Xk/Gs70TE9lOZQNFWsGx1IvDJoozxNDttNpmHOfyTssBj59PHxceP6keREDlYPvBGUMJzTD5LHuKhHtC70EEQe72atMAIoLu0MWzRPxInZnEdxZib2I37L2XEI/HsSvYd44AQrqZIW5b3J8fHR0sS/2ve5DJZIzFFexnSD262QAs+c1js45zyVU6KqIwnU5bS58x0mhGhusbaz153Sw9dW+QSr3yCdwJe4wCKlCigbAWiw7PAYDQdclrAclkxk8+iDBifr3JMq3lO86VQsVMuq549RQSU687mOcNANE+VfiFxuLd6NX3e5llD8qjskqb54E8n24mk5Yf3B6ab2auBsgGC8Q7QOJ1AS6ExrSZ12s6r57CyIi99cNgswywtkkIzDB2eSSdftmuGxp57RgfOfY38HlvRWVNqgmYsDb57sDkZK5hb1RHZQ9+U8bu37S/MtOc0zUg8G2U1yOV4WrTdcXrAqT4MDq0yokXVINEwb32pS9WOJfLmboueW0OGgtP05mj3IXTum6iuXHogDtr27an9D/eQBVijr2AiB/VvUQuePenNXZBfmhKrxEl6Hjv1vAHA2lJ1wRBcH9vf5+cH6k3DZANsei1eWCwIrm6uOf1Jsenq8v7Z4ActFJxrsBMo6gC0GAebPHq/Z6bqJoVyn/EQpGFK08MmF2B/Oj1wZKqtYzxeM5MJKY6dMNPQnnePR8FubkAAAAASUVORK5CYII=");
  
        &--right {
          transform: rotate(180deg);
        }
  
        &--disabled {
          opacity: 0.5;
        }
      }
  
      .controller__info {
        @include flex(0 0 auto);
  
        font-size: 30px;
        margin-left: 40px;
        margin-right: 40px;
      }
    }
  }
  
  .at-calendar-slider__main {
    .main__body {
      @include display-flex;
  
      width: 100%;
  
      &--animate {
        transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
      }
  
      .body__slider {
        @include flex(0 0 100%);
      }
    }
  
    &--weapp,
    &--swan {
      .main__body {
        height: 480px;
      }
    }
  }
