@import 'variables';

.vl-calendar-month {
  padding: $vl-calendar-month-padding;

  &__title {
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
  }

  &__week-numbers-column {
    padding-top: 24px;
  }

  &__week-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    width: 100%;
    height: 24px;
    color: $vl-gray-0;
    font-size: 10px;
  }

  &__week-day {
    display: inline-block;
    margin-bottom: 10px;
    width: 14%;
    text-align: center;
    color: $vl-weekday-text-color;
    font-size: 12px;
  }

  &__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    cursor: pointer;
    width: 14%;
    height: 24px;

    @for $i from 1 through 6 {
      &--offset-#{$i} {
        margin-left: calc(#{$i} * 14%);
      }
    }

    &.disabled {
      color: $vl-gray-1;
      pointer-events: none;

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

      &--last {
        border-top-right-radius: 14px;
        border-bottom-right-radius: 14px;
      }
    }

    &.selected {
      background: $vl-selected-day-bg-color;
      color: $vl-selected-day-text-color;
      font-weight: 800;

      &.disabled {
        border: $vl-selected-disabled-border;
        background: $vl-selected-disabled-day-bg-color;
        color: $vl-selected-disabled-day-text-color;
      }

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

      &--last {
        border-top-right-radius: 14px;
        border-bottom-right-radius: 14px;
      }
    }

    &:hover {
      &:not(.selected) {
        border-radius: 14px;
        background: $vl-selected-day-bg-color;
        color: $vl-selected-day-text-color;
        font-weight: 800;
      }
    }
  }
}
