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

.stack-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

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

.card-container {
  width: 100%;
  // height: 50px;
  // max-height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  // display: grid;
  // grid-template-rows: 0fr;
  transition: transform 500ms ease;
  margin-top: calc(-1 * int.$spacing-2);

  &.is-active {
    transform: translateY(-10px) rotate(-1.5deg);
    margin-bottom: calc(-1 * int.$spacing-24)
  }

  &.is-full {
    margin: int.$spacing-3 0 int.$spacing-5;
  }
}

.animation-container {
  display: grid;
  grid-template-rows: 0px 0fr;
  transition: grid-template-rows 500ms ease;

  &.is-active {
    grid-template-rows: 160px 0fr;
  }

  &.is-full {
    grid-template-rows: 0px 1fr;
    transform: none;
  }

  &.is-last {
    grid-template-rows: 1fr;
  }

  &.no-elections {
    grid-template-rows: 0fr;
  }

  &.no-elections.is-full {
    grid-template-rows: 1fr;
  }
}

.animation-inner {
  overflow: hidden;
  padding: 0 int.$spacing-1;
  grid-row: 1 / span 2;
}

.card {
  position: relative;
  width: calc(100% - int.$spacing-10);
  background-color: #fff;
  padding: int.$spacing-5;
  box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, .10);
  transition: transform 200ms ease,  margin-bottom 500ms ease;
  cursor: pointer;
  margin-bottom: 0;

  @include int.breakpoint-at-most("xs") {
    width: calc(100% - int.$spacing-3);
  }

  &:hover.is-active {
    transform: rotate(1deg);
    cursor: pointer;
  }

  &:hover:not(.is-active):not(.is-full) {
    transform: translateY(calc(-1 * int.$spacing-2));
    cursor: pointer;
  }

  &:not(.is-active):not(.is-full) {
    padding-top: int.$spacing-3;
  }
}

.card.is-full {
  .sticker:not(.no-num) {
    bottom: 50%;

    @include int.container-at-least("sm") {
      bottom: 25%;
    }
  }
}

.card:not(.is-active) {
  z-index: 1;
}

.card-container,
.card {
  >.is-active,
  >.is-full {
    width: 100%;
  }
}

.is-past {
  z-index: 0;
  background-color: int.$warmgray-10;

  &.is-full {
    background-color: #fff;

    .sticker {
      background-color: #fff;
    }
  }

  .sticker {
    background-color: int.$warmgray-10;
  }
}

.card-month {
  @include int.title($size: "300");

  @include int.breakpoint-at-least("sm") {
    @include int.title($size: "400");
  }

  @include int.breakpoint-at-least("xl") {
    @include int.title($size: "500");
  }
}

.card-month:not(.is-active):not(.is-full) {
  $w: "regular";

  @include int.title($size: "300", $weight: $w);

  @include int.breakpoint-at-least("sm") {
    @include int.title($size: "400", $weight: $w);
  }

  @include int.breakpoint-at-least("xl") {
    @include int.title($size: "500", $weight: $w);
  }
}

.card-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: int.$warmgray-60;
  position: relative;
  padding: 0 int.$spacing-1;

  &.is-active,
  &.is-full {
    margin-bottom: int.$spacing-2;

    .card-month {
      color: #000;
    }
  }
}

.sticker {
  position: absolute;
  right: 0;
  bottom: 0;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: int.$spacing-1;
  border: 1px solid int.$warmgray-20;
  padding: int.$spacing-3;
  color: int.$warmgray-70;
  margin-left: 16px;
  background-color: #fff;
  z-index: 3;
  transform: translate(calc(100% + int.$spacing-3), int.$spacing-4) rotate(var(--rotate, -1.5deg));

  @include int.sans($size: "100", $role: "component");

  @include int.breakpoint-at-most("xs") {
    padding: int.$spacing-2;
    transform: translate(calc(100% + int.$spacing-3), int.$spacing-3) rotate(var(--rotate, -1.5deg));
  }

  &.no-num {
    bottom: -1 * int.$spacing-1;
    transform: translate(calc(100% + int.$spacing-3), 0) rotate(var(--rotate, -1.5deg));
    padding: int.$spacing-2;
  }

  &.wrap {
    flex-direction: column;
  }

}

.gop {
  color: int.$gop-60;
}

.dem {
  color: int.$dem-60;
}