/*  Mixin to generate a calendar icon.
    $month [String] The month (3-letter abbreviation, typically).
    $date [Number] The day in the month.
    $background-color [Color] A color value for the icon background (behind the month).
    $foreground-color [Color] A color value for the color behind the day.
    $scale [Number] A multiplier for the size of the icon (1 is the default). */
@mixin cf-calendar-icon(
  $month,
  $date,
  $background-color,
  $foreground-color,
  $scale
) {
  // Display & Box Model.
  display: block;
  width: 3em * $scale;
  border: 0.25em solid $background-color;
  border-radius: 0.375em * $scale;

  // Background.
  background-color: $background-color;

  // Foreground.
  line-height: 1;
  text-align: center;

  &::before,
  &::after {
    // Display & Box Model.
    display: block;
  }

  &::before {
    // Display & Box Model.
    padding-bottom: 0.15em;

    // Foreground.
    color: $foreground-color;
    font-size: 1em * $scale;
    text-transform: uppercase;

    // Miscellaneous, alphabetic.
    content: $month;
  }

  &::after {
    // Display & Box Model.
    padding: 0.15em 0 0;
    border-radius: 0 0 0.16em 0.16em;

    // Background.
    background: $foreground-color;

    // Foreground.
    color: $background-color;
    font-size: 1.5em * $scale;

    // Miscellaneous, alphabetic.
    content: $date;
  }
}

.calendar-icon {
  @include cf-calendar-icon(
    attr(data-month),
    attr(data-day),
    var(--gray-40),
    var(--white),
    1
  );
}
