@use "sass:math";

// Define $daySize using the Tailwind theme function
$daySize: theme("spacing.md");

.cobalt-CalendarView {
  display: flex;

  @apply c-gap-sm;

  &__monthName {
    @apply c-text-section-heading;
  }

  &__week {
    display: flex;

    @apply c-gap-2xs;
  }

  &__day {
    @apply c-text-onSurface;

    display: flex;
    align-items: center;
    justify-content: center;
    width: $daySize;
    height: $daySize;
    flex-shrink: 0;

    font-size: 12px;

    border-radius: calc(#{$daySize} / 2);

    &--disabled {
      @apply c-bg-surfaceContainerVariant c-text-onSurfaceVariant;
    }

    &--highlighted {
      @apply c-text-onTertiary c-bg-tertiary;
    }

    &--semi-highlighted {
      @apply c-text-onTertiaryContainer c-bg-tertiaryContainer;
    }

    &--past {
      @apply c-text-onSurfaceVariant;
      opacity: 0.4;
    }
  }
}