@use "./variables" as *;

$popup-close-icon-size: var(--popup-close-icon-size, 22px * $hd);

.#{$component-prefix}popup--bottom.#{$component-prefix}calendar--popup, .#{$component-prefix}popup--top.#{$component-prefix}calendar--popup{
  height: $calendar-popup-height;
}

.#{$component-prefix}popup--left.#{$component-prefix}calendar--popup, .#{$component-prefix}popup--right.#{$component-prefix}calendar--popup{
  height: 100%;
}
.#{$component-prefix}calendar--popup {
  .#{$component-prefix}popup__close-icon {
    --popup-close-icon-margin: calc((#{$calendar-header-title-height} - #{$popup-close-icon-size}) / 2);
  }
}

.#{$component-prefix}calendar {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: $calendar-background-color;

  &__header {
    flex-shrink: 0;
    box-shadow: $calendar-header-box-shadow;
  }

  &__month-title,
  &__header-title,
  &__header-subtitle {
    height: $calendar-header-title-height;
    font-weight: $font-weight-bold;
    line-height: $calendar-header-title-height;
    text-align: center;
  }

  &__header-title {
    font-size: $calendar-header-title-font-size;
  }

  &__header-subtitle {
    font-size: $calendar-header-subtitle-font-size;
  }

  &__month-title {
    font-size: $calendar-month-title-font-size;
  }

  &__weekdays {
    display: flex;
  }

  &__weekday {
    flex: 1;
    font-size: $calendar-weekdays-font-size;
    line-height: $calendar-weekdays-height;
    text-align: center;
  }

  &__body {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  &__days {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    user-select: none;
  }

  &__month-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    font-size: $calendar-month-watermark-font-size;
    color: $calendar-month-watermark-color;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  &__day,
  &__active-day {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  &--multiple,
  &--range {
    .#{$component-prefix}calendar__day {

      &--end,
      &--start,
      &--active {
        color: $calendar-range-edge-color;
        background: $calendar-range-edge-background-color;
      }

      &--start {
        border-radius: var(--border-radius-md, $border-radius-md) 0 0 var(--border-radius-md, $border-radius-md);
      }

      &--end {
        border-radius: 0 var(--border-radius-md, $border-radius-md) var(--border-radius-md, $border-radius-md) 0;
      }

      &--active {
        border-radius: $border-radius-md;
      }
    }
  }

  &--multiple {
    .#{$component-prefix}calendar__day {
      &--middle {
        color: $calendar-range-edge-color;
        background: $calendar-range-edge-background-color;
      }
    }
  }

  &--range {
    .#{$component-prefix}calendar__day {
      &--middle {
        color: $calendar-range-middle-color;

        &::after {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          content: '';
          background-color: currentColor;
          opacity: $calendar-range-middle-background-opacity;
        }
      }
    }
  }

  &__day {
    position: relative;
    width: 14.285%;
    height: $calendar-day-height;
    font-size: $calendar-day-font-size;
    cursor: pointer;

    &--placeholder {
      width: 100%;
    }

    &--disabled {
      color: $calendar-day-disabled-color;
      cursor: default;
    }

    &__top,
    &__bottom {
      position: absolute;
      right: 0;
      left: 0;
      font-size: $calendar-day-info-font-size;
      line-height: $calendar-day-info-line-height;

      @media (max-width: 350px) {
        font-size: 9px;
      }
    }

    &__top {
      top: 6px;
    }

    &__bottom {
      bottom: 6px;
    }
  }

  &__active-day {
    width: $calendar-active-day-size;
    height: $calendar-active-day-size;
    color: $calendar-active-day-color;
    background: $calendar-active-day-background-color;
    border-radius: $calendar-active-day-border-radius;
  }

  &__footer {
    flex-shrink: 0;
    padding: $calendar-footer-padding;
    .#{$component-prefix}calendar__confirm {
      height: $calendar-confirm-button-height;
      margin: $calendar-confirm-button-margin;
      background: $calendar-confirm-button-color;
      border-color: $calendar-confirm-button-color;
    }
  }
}