@import 'src/global/styles/var';

.glue-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  width: 14.285%;
  height: @calendar-day-height;
  font-size: @calendar-day-font-size;
  cursor: pointer;
  &__top-info,
  &__bottom-info {
    position: absolute;
    right: 0;
    left: 0;
    font-size: @calendar-info-font-size;
    line-height: @calendar-info-line-height;

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

  &__top-info {
    top: 6px;
  }

  &__bottom-info {
    bottom: 6px;
  }
  &__selected-day {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: @calendar-selected-day-size;
    height: @calendar-selected-day-size;
    color: @calendar-selected-day-color;
    background-color: @calendar-selected-day-background-color;
    border-radius: @border-radius-md;
  }
  &--end,
  &--start,
  &--start-end,
  &--multiple-middle,
  &--multiple-selected {
    color: @calendar-range-edge-color;
    background-color: @calendar-range-edge-background-color;
  }

  &--start {
    border-radius: @border-radius-md 0 0 @border-radius-md;
  }

  &--end {
    border-radius: 0 @border-radius-md @border-radius-md 0;
  }

  &--start-end,
  &--multiple-selected {
    border-radius: @border-radius-md;
  }

  &--middle {
    color: @calendar-range-middle-color;

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

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