.ga-calendar {
  @apply w-70 bg-white lining-nums slashed-zero tabular-nums;

  .ga-calendar__header {
    @apply flex flex-row items-center justify-between gap-1;
  }

  .ga-calendar__month-year {
    @apply flex flex-row gap-2;
  }

  .ga-calendar__month-year-button {
    @apply flex cursor-pointer flex-row items-center gap-1 text-lg font-semibold text-(--ga-color-text-action);

    .ga-icon {
      @apply text-(--ga-color-icon-primary);
    }
  }

  .ga-calendar__navigation {
    @apply flex flex-row gap-2;
  }

  .ga-calendar__navigation-button {
    @apply animate-hover cursor-pointer transition-colors hover:text-(--ga-color-icon-action-hover);
  }

  .ga-calendar__week-row {
    @apply flex flex-row gap-4;
  }

  .ga-calendar__week-day {
    @apply size-6;
  }

  .ga-calendar__selection {
    @apply grid;

    &.ga-calendar__selection--year {
      @apply mt-4 grid-cols-5 gap-x-3 gap-y-2;
    }

    &.ga-calendar__selection--month {
      @apply mt-4 grid-cols-3 gap-3;
    }

    &.ga-calendar__selection--day {
      @apply mt-2 grid-cols-7 gap-y-1;
    }
  }

  .ga-calendar__year,
  .ga-calendar__month {
    @apply animate-hover h-10 cursor-pointer rounded text-center text-lg leading-10 font-medium text-(--ga-color-text-action) transition-colors;

    &:not(.ga-calendar__year--disabled, .ga-calendar__month--disabled):hover {
      @apply text-(--ga-color-text-action-hover) underline underline-offset-6;
    }

    &.ga-calendar__year--selected,
    &.ga-calendar__month--selected {
      @apply text-md bg-(--ga-color-surface-action) text-(--ga-color-text-on-action);
    }

    &.ga-calendar__year--disabled,
    &.ga-calendar__month--disabled {
      @apply cursor-not-allowed text-(--ga-color-text-disabled);
    }
  }

  .ga-calendar__day {
    @apply text-md animate-hover relative flex h-10 cursor-pointer items-center justify-center rounded text-center text-(--ga-color-text-body) transition-colors;

    &:hover {
      @apply bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-action-hover);
    }

    &.ga-calendar__day--current::after {
      @apply absolute bottom-2 left-1/2 h-0.5 w-5 -translate-x-1/2 transform rounded bg-(--ga-color-surface-action) content-[''];
    }

    &.ga-calendar__day--special::after {
      @apply absolute bottom-2 left-1/2 h-1 w-1 -translate-x-1/2 transform rounded-full bg-(--ga-color-surface-action) content-[''];
    }

    &.ga-calendar__day--disabled {
      @apply rounded-sharp cursor-not-allowed bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
    }

    &.ga-calendar__day--weekend {
      @apply text-(--ga-color-text-disabled);
    }

    &.ga-calendar__day--selected {
      @apply bg-(--ga-color-surface-action) text-(--ga-color-text-on-action);

      &.ga-calendar__day--current::after,
      &.ga-calendar__day--special::after {
        @apply bg-(--ga-color-icon-on-action);
      }

      &:hover {
        @apply bg-(--ga-color-surface-action-hover) text-(--ga-color-text-on-action);
      }

      &.ga-calendar__day--disabled {
        @apply bg-(--ga-color-surface-disable-selected) text-(--ga-color-text-on-action);
      }
    }

    &.ga-calendar__day--selected-range-start {
      @apply rounded-r-none bg-(--ga-color-surface-action) text-(--ga-color-text-on-action);
    }

    &.ga-calendar__day--selected-range-middle {
      @apply rounded-none border-y border-(--ga-color-border-success) bg-(--ga-color-success-accent) text-(--ga-color-text-body);
    }

    &.ga-calendar__day--selected-range-end {
      @apply rounded-l-none bg-(--ga-color-surface-action) text-(--ga-color-text-on-action);
    }

    &.ga-calendar__day--selected-range-middle-hover {
      @apply rounded-none border-y border-dashed border-(--ga-color-border-action-hover) bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-body);
    }

    &.ga-calendar__day--selected-range-end-hover {
      @apply rounded-l-none border border-(--ga-color-border-action) bg-(--ga-color-surface-primary) text-(--ga-color-text-body);
    }
  }

  .ga-calendar__weekdays {
    @apply mt-2 grid h-6 grid-cols-7 items-center justify-items-center;
  }

  .ga-calendar__weekday {
    @apply text-xs font-medium;
  }
}