@import '../variables/default.scss';
@import '../mixins/index.scss';

.at-calendar {
  overflow: hidden;

  /* elements */
  &__header {
    position: relative;
    z-index: 10;
    background-color: white;

    .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: 0.7);

          &-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);

    padding-bottom: 20px;
    position: relative;
    z-index: 10;
    background-color: white;

    .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%;
    height: 480px;

    &--animate {
      transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
    }

    .body__slider {
      @include flex(0 0 100%);
    }
  }
}