$calendar-item-width-mobile: 36;
$calendar-item-width-tablet: 48;
$calendar-item-width-desktop: 60;

@mixin calendar-width($itemWith, $numElements, $padding) {
  width: #{$itemWith * $numElements + 2 * $numElements + 2 * $padding};
}

@mixin font-size-handler($day-size, $price-size, $pos) {
  .day,
  &.week-number,
  &.week-day {
    @include font-size($day-size);
  }

  .day {
    top: $pos;
  }

  .price {
    @include font-size($price-size);
    bottom: $pos;
    font-weight: bold;
    white-space: nowrap;
    color: $text-color;
  }
}

.price-calendar {
  background-color: $color-blue-100;
  text-align: center;
  border-radius: $margin-half;
  padding: $margin-normal;
  margin-top: $margin-normal;
  margin-bottom: $margin-normal;
  width: 100%;

  @include breakpoint(sm) {
    @include calendar-width($calendar-item-width-tablet, 8, $margin-normal);
    margin-right: $margin-normal;
    margin-bottom: 0;
  }

  @include breakpoint(md) {
    @include calendar-width($calendar-item-width-desktop, 8, $margin-normal);
  }

  &.price-calendar-loader {
    .week-date {
      background: $color-white;
      opacity: 0;
      animation: popping-calendar-boxes 5s infinite linear;
    }

    /* stylelint-disable max-nesting-depth */
    @for $r from 2 to 7 {
      .price-calendar__row:nth-child(#{$r}) {
        @for $i from 2 to 9 {
          .week-date:nth-child(#{$i}) {
            animation-delay: (($r - 2) * ($i - 1) + $i) * .15s;
          }
        }
      }
    }
    /* stylelint-enable */
  }

  &__month {
    margin-bottom: $margin-normal;
    text-transform: capitalize;
  }

  &__table,
  &__row,
  &__column {
    display: flex;
  }

  &__table {
    flex-direction: column;
  }

  &__column {
    flex: 1;
    margin: 1px;
    color: $color-blue-400;
    border-radius: $border-radius-normal;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    @include font-size-handler(10, 10, 4px);

    @include breakpoint(sm) {
      @include font-size-handler(12, 12, 6px);
    }

    @include breakpoint(md) {
      @include font-size-handler(12, 14, 6px);
    }

    @include breakpoint(lg) {
      @include font-size-handler(12, 14, 8px);
    }

    &:after {
      content: '';
      display: block;
      padding-top: 100%;
    }

    &.week-number,
    &.week-date,
    &.week-day {
      position: relative;

      span {
        position: absolute;
        left: 0;
        width: 100%;
      }
    }

    &.week-number,
    &.week-day {
      font-weight: bold;
    }

    &.week-day {
      max-height: 30px;
      display: flex;

      span {
        bottom: $margin-half;
      }
    }

    &.in-month:not(.selected) {
      background-color: $color-white;
      /* stylelint-disable max-nesting-depth */
      &:not(.lowest-price-animation) {
        span:first-child {
          color: $color-blue-400;
          font-weight: normal;
        }
      }
      /* stylelint-enable */
    }

    &.lowest-price-animation:not(.selected) {
      .day,
      .price {
        color: $color-red-300;
      }
    }

    &.has-price:hover {
      cursor: pointer;
      box-shadow: $box-shadow-card;
    }

    &.selected {
      background-color: $color-red-300;
      color: $color-white;
      font-weight: bold;

      span {
        color: $color-white;
      }
    }

    &.week-number {
      span {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      @include breakpoint(xs) {
        display: none;
      }
    }
  }
}

@keyframes popping-calendar-boxes {
  0% {
    opacity: 0;
    transform: scale(.8);
  }

  20%,
  60% {
    opacity: 1;
    transform: scale(1);
  }

  80%,
  100% {
    opacity: 0;
    transform: scale(.8);
  }
}