@use '../../styles/variables' as *;
@use '../../styles/mixins' as *;

.ui-calendar {
  display: inline-block;
  width: fit-content;
  background-color: var(--calendar-background);
  color: var(--calendar-color);
  padding: 16px 16px 24px 16px;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;

    i {
      &:hover {
        cursor: pointer;
      }
    }
  }

  &__title {
    @include txt-i-sb;

    text-transform: capitalize;
  }

  &__week-days,
  &__days {
    display: grid;
    grid-template-columns: repeat(7, 32px);
    color: var(--calendar-day-color);

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }

  &__week-days {
    @include txt-s;

    grid-auto-rows: 24px;
    text-transform: capitalize;
  }

  &__days {
    @include txt-i-m;

    grid-auto-rows: 32px;
  }

  &__apply-button {
    width: 100%;
    margin-top: 16px;
  }

  &__cell {
    transition: 0.2s ease-out;
    transition-property: background-color;

    &:not(&--period-start, &--period-end, &--period):hover {
      background: var(--calendar-day-background-hover-color);
      border-radius: 8px;
    }
    &--current-month {
      color: var(--calendar-current-month-day-color);
    }

    &--current-day {
      color: var(--calendar-today-color);
    }

    &--period {
      background-color: var(--calendar-period-background);
    }

    &--period-start,
    &--period-end {
      border-radius: 8px;
      position: relative;
      color: var(--calendar-period-start-end-color);
      z-index: 2;

      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 0;
        height: 100%;
        z-index: -1;
      }

      &::before {
        width: 50%;
        background-color: var(--calendar-period-background);
      }

      &::after {
        width: 100%;
        background-color: var(--calendar-period-start-end-background);
        border-radius: inherit;
        left: 0;
      }
    }
    &--period-start {
      &::before {
        right: 0;
      }
    }

    &--period-end {
      &::before {
        left: 0;
      }
    }
  }

  /* prettier-ignore */
  @include element-variant(
                  'calendar',
                  '',
                  (
                          'color': $clr-black,
                          'background': $clr-white,
                          'day-color': $clr-grey-500,
                          'current-month-day-color': $clr-black,
                          'today-color': $clr-cyan-500,
                          'arrow-color': $clr-grey-600,
                          'period-start-end-color': $clr-white,
                          'period-start-end-background': $clr-cyan-500,
                          'period-background': $clr-grey-100,
                          'day-background-hover-color': $clr-grey-100
                  )
  );
}