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

.container {
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-areas: "dem-label gop-label"
    "bar bar";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 30px;
  transform-origin: top center;
  transition: transform .2s ease-in-out;

  &.bottom {
    grid-template-areas: "bar bar"
      "dem-label gop-label";
    grid-template-rows: 30px auto;
  }

  &.winner {
    grid-template-areas: "label label"
      "bar bar";
  }
}

.label {
  transition: transform .2s ease-in-out;
  transform-origin: top left;

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

  @include int.container-at-least("md") {
    @include int.sans($size: "300", $weight: "bold");

  }

  &.dem {
    grid-area: dem-label;
    color: int.$dem-80;
  }

  .winner &.dem {
    grid-area: label;
  }

  &.gop {
    grid-area: gop-label;
    justify-self: flex-end;
    transform-origin: top right;
    color: int.$gop-80;
  }

  .winner &.gop {
    grid-area: label;
  }

  &.dem.winner-gop,
  &.gop.winner-dem {
    visibility: hidden;
  }

  .deemphasize & {
    transform: scaleX(.6);
  }

  .none & {
    display: none;
  }
}

.bar {
  display: flex;
  grid-area: bar;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity .2s ease-in-out;
  border: .1rem solid int.$warmgray-80;
}

.section {
  height: 100%;
  flex: 1;
  flex-basis: var(--pct, 0);
  transition: flex-basis .2s ease-in-out;

  &.dem {
    background: int.$dem-50;
  }

  &.gop {
    background: int.$gop-50;
  }

  &.isZero {
    flex: 0;
    flex-basis: 0;
    width: 0;
  }

  &.tie {
    display: none;
    justify-content: center;
    align-items: center;
    flex-basis: 100%;
    background: white;

    @include int.overline();

    &.isTie {
      display: flex;
    }
  }
}