@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"
    "dem-label gop-label";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  width: 100%;
  text-align: left;
}

.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;
}
