@use '../../compiled/tokens/scss/color';
@use '../../compiled/tokens/scss/font-weight';
@use '../../compiled/tokens/scss/line-height';
@use '../../compiled/tokens/scss/size';
@use '../../mixins/ms';
@use '../../mixins/theme';

$size: ms.step(8);
$edge-size: size.$edge-medium;
$radius: size.$border-radius-medium;

/**
 * Themed properties
 */

@include theme.props {
  --theme-color-border-calendar-date: #{color.$base-gray-light};
}

@include theme.props(dark) {
  --theme-color-border-calendar-date: #{color.$brand-primary-dark};
}

.c-calendar-date {
  block-size: $size;
  display: flex;
  flex-direction: column;
  font-weight: font-weight.$medium;
  inline-size: $size;
  line-height: line-height.$tight;
  text-align: center;
  user-select: none;
}

/**
 * 1. These defaults colors are a little drab, but they won't require any
 *    complex specificity to override across themes, and they will rarely be
 *    seen unless seasonal modifier classes are omitted.
 */

.c-calendar-date__header {
  align-items: center;
  background-color: color.$base-gray-dark; /* 1 */
  block-size: ms.step(3);
  border: $edge-size solid color.$base-gray-darker; /* 1 */
  border-block-end-width: 0;
  border-top-left-radius: $radius;
  border-top-right-radius: $radius;
  color: color.$text-light-emphasis;
  display: flex;
  flex: none;
  font-weight: font-weight.$semibold;
  justify-content: center;
  text-transform: uppercase;

  /**
   * Seasonal colors
   */

  .c-calendar-date--march &,
  .c-calendar-date--april &,
  .c-calendar-date--may & {
    background-color: color.$base-green-dark;
    border-color: color.$base-green-darker;
  }

  .c-calendar-date--june &,
  .c-calendar-date--july &,
  .c-calendar-date--august & {
    background-color: color.$base-fuchsia-dark;
    border-color: color.$base-fuchsia-darker;
  }

  .c-calendar-date--september &,
  .c-calendar-date--october &,
  .c-calendar-date--november & {
    background-color: color.$base-orange-dark;
    border-color: color.$base-orange-darker;
  }

  .c-calendar-date--december &,
  .c-calendar-date--january &,
  .c-calendar-date--february & {
    background-color: color.$base-purple-dark;
    border-color: color.$base-purple-darker;
  }
}

.c-calendar-date__main {
  align-items: center;
  background-color: color.$text-light-emphasis;
  border: $edge-size solid var(--theme-color-border-calendar-date);
  border-block-start-width: 0;
  border-bottom-left-radius: $radius;
  border-bottom-right-radius: $radius;
  color: color.$text-dark;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.c-calendar-date__day {
  font-size: ms.step(3);
}

/**
 * 1. Truncation
 */

.c-calendar-date__note {
  font-size: size.$font-small;
  inline-size: 100%; /* 1 */
  overflow: hidden; /* 1 */
  padding: 0 size.$spacing-control-text-inset;
  text-overflow: ellipsis; /* 1 */
  white-space: nowrap; /* 1 */
}