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

$default-border-width: 2;
$border-width: calc(var(--border-width, #{$default-border-width}) * 1px);

.bop {
  display: grid;
  grid-template-areas: "bar bar bar"
    "dem-label other-label gop-label";
  grid-template-columns: auto 1fr auto;
  width: 100%;
  text-align: left;

  @include int.container-at-most("md") {
    grid-template-areas: "bar bar bar"
      "dem-label empty gop-label"
      "other-label other-label other-label";
  }
}

.barContainer {
  grid-area: bar;
  position: relative;

  &.hasFlips {
    margin-top: int.$spacing-4;
  }
}

.bar {
  border: $border-width solid int.$warmgray-80;
  height: calc(var(--height, 40) * 1px);
  display: flex;
}

.centerMark {
  display: none;
  position: absolute;
  top: $border-width;
  left: 50%;
  height: calc(100% - (2 * $border-width));
  border-left: $border-width dashed int.$warmgray-80;
  transform: translateX(-50%);

  &.markCenter {
    display: block;
  }

  &.pastCenter {
    border-color: white;
  }
}

.demLabel {
  grid-area: dem-label;
}

.gopLabel {
  grid-area: gop-label;
  justify-self: flex-end;
  text-align: right;
}

.otherLabel {
  grid-area: other-label;
  color: int.$warmgray-60;
  justify-self: left;
  text-align: left;
  margin-top: int.$spacing-2;

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

  @include int.container-at-least("lg") {
    justify-self: center;
    text-align: center;
    text-wrap: balance;
    max-width: 400px;

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

.otherName {
  @include int.overline;
}