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

.cal-hor {
  position: relative;
  max-width: 100%;
  display: flex;
  flex-direction: column;

  @include int.election-layer-zindex("content");

  &:not(.overflow) {
    border-right: 1px solid int.$warmgray-30;
  }
}

.overline {
  color: int.$warmgray-70;
  display: block;
  width: 100%;
  margin-bottom: int.$spacing-2;

  @include int.overline();

  .overflow & {
    max-width: var(--Well-content-width, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

.container {
  display: flex;
  column-gap: 1rem;
  max-width: 100%;
  overflow-x: scroll;
  padding: 6px var(--Grid-gutter) 8px 1px;

  @include int.breakpoint-at-most("sm") {
    .overflow & {
      padding-left: var(--Grid-gutter, #{int.$spacing-3});
    }
  }
}

.date-group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  z-index: 2;

  @include int.breakpoint-at-least("md") {
    .overflow &:first-of-type {
      padding-left: var(--Grid-gutter, #{int.$spacing-3});
    }
  }

  &[data-is-even=true]>.page-date {
    transform: rotate(-2deg);
  }

  &[data-is-even=false]>.page-date {
    transform: rotate(2deg);
  }
}

.link {
  display: block;
  margin-right: int.$spacing-2;
  text-align: right;

  @include int.election-red-link;
  @include int.sans($size: "200", $weight: "bold");

  .overflow & {
    max-width: var(--Well-content-width, 100%);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

}

/** PAGE DATE STYLES **/
.page-date {
  border: 1px solid int.$warmgray-20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-width: 69px;
  background-color: #fff;
}

.month {
  border-bottom: 1px solid int.$warmgray-20;
  color: int.$warmgray-100;

  @include int.overline();
}

.day {
  color: int.$warmgray-90;

  @include int.title($weight: "light", $size: "400")
}