@import "../settings/variables";
@import "../tools/icons";
@import "../tools/typography";

$calendar-max-width: 280px;

.calendar {
  max-width: $calendar-max-width;
  @include xs-regular--primary;

  &__select {
    width: 84px;

    // TODO remove this, it's a hack to prevent Month/Year labels from getting cut off
    // until we adjust the size of the calendar to accomodate larger pagination buttons
    & > div {
      font-size: 12px;
    }
  }

  &__next,
  &__prev {
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: spacing(sm);
    margin-right: spacing(sm);
  }

  &__week {
    padding-bottom: 2px;

    &:last-child {
      padding-bottom: 0px;
    }

    &--header {
      font-weight: bold;
      pointer-events: none;
    }
  }

  &__day {
    border-radius: 4px;
    cursor: pointer;
    height: $calendar-cell-height;
    width: $calendar-cell-height;

    &--hover,
    &:hover {
      background-color: $core-blue-94;
      color: $core-gray-15;
      font-weight: bold;
    }

    &:first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    &:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    &--other-month {
      @include xs-regular--secondary;
    }
    &--selected {
      border-radius: 0;
    }

    &--selected,
    &--selected:hover {
      background-color: $core-blue-40;
      color: $core-white;
      font-weight: bold;
    }

    &--range-bookend,
    &--range-bookend:hover {
      background-color: $core-blue-30;
    }

    &--range-start {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    &--range-end {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    &--disabled,
    &:disabled {
      background-color: $core-gray-96;
      pointer-events: none;
      border-radius: 0px;
    }

    &--disabled,
    &:disabled {
      @include xs-regular--secondary;

      &.calendar__day--other-month {
        @include xs-regular--tertiary;
      }

      &.calendar__day--selected {
        font-weight: bold;
      }
    }

    &--today {
      @include sm-bold--primary;

      &.calendar__day--selected {
        font-weight: 500;
        color: $core-white;
      }
    }
  }
}