@use "../../../styles/int.scss";

$scroll-padding: var(--CalendarGroup-scroll-padding, 0px);
$date-card-width: 164px;
$date-card-width-small: 154px;
$date-card-width-xs: 130px;

@mixin is-wrap-mode {
  .wrap & {
    @content;
  }

  @include int.breakpoint-at-least("md") {
    .wrapAuto & {
      @content;
    }
  }
}

@mixin is-not-wrap-mode {
  .noWrap & {
    @content;
  }

  @include int.breakpoint-at-most("sm") {
    .wrapAuto & {
      @content;
    }
  }
}

.state-cal {
  display: flex;
  flex-direction: column;
}

.overline {
  color: int.$warmgray-70;

  @include int.overline();
}

.scroll {
  @include is-not-wrap-mode {
    width: calc(100% + 2 * #{$scroll-padding});
    margin-left: calc(-1 * #{$scroll-padding});
    padding-left: $scroll-padding;
    overflow-x: auto;
    padding-bottom: 6px;
  }
}

.container {
  display: grid;
  align-items: flex-start;
  gap: int.$spacing-2;

  @include is-not-wrap-mode {
    grid-auto-flow: column;
    grid-auto-columns: minmax($date-card-width-xs, 1fr);
    float: left;
    padding-right: $scroll-padding;

    @include int.container-at-least("sm") {
      grid-auto-columns: minmax($date-card-width-small, 1fr);
    }

    @include int.container-at-least("md") {
      grid-auto-columns: $date-card-width;
    }
  }

  @include is-wrap-mode {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax($date-card-width, 1fr));
  }
}

.date-card {
  background: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: int.$spacing-2 int.$spacing-4 int.$spacing-1;
  border-bottom: 1px solid int.$warmgray-20;
}

.month {
  color: int.$warmgray-100;
  text-transform: uppercase;
  font-weight: normal !important;

  @include int.overline($size: "200");
}

.day {
  @include int.title($size: "200", $weight: "light")
}

.election {
  padding: int.$spacing-3;

  > div {
    float: left;
    margin-top: .432rem;
    margin-right: .25rem;
    margin-left: .15rem;
  }
}

.note {
  @include int.sans($role: "component", $size: "200");
}