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

.cell {
  position: relative;
  background-color: white;
  height: 100%;
  flex: 1 1;
  border-right-width: 1px;
  border-right-style: solid;
  background-color: var(--status-color);
  border-color: var(--status-color);

  &.simpler {
    border-right-width: 0;
  }
}

.notCalled {
  --status-color: white;
  --border-color: #{int.$warmgray-80};
}

.calledDem {
  --status-color: #{int.$dem-50};
  --contrast-color: #{int.$dem-70};
  --border-color: #{int.$dem-80};
}

.seatedDem {
  --status-color: #{int.$dem-70};
  --contrast-color: #{int.$dem-70};
  --border-color: #{int.$dem-90};
}

.calledGop {
  --status-color: #{int.$gop-50};
  --contrast-color: #{int.$gop-70};
  --border-color: #{int.$gop-80};

}

.seatedGop {
  --status-color: #{int.$gop-70};
  --contrast-color: #{int.$gop-70};
  --border-color: #{int.$gop-90};
}

.border-top,
.border-bottom {
  &::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    height: 0;
    z-index: 1;
  }

  &.simpler {
    &::after {
      border-top-width: 0;
      border-bottom-width: 0;
    }
  }
}

.border-top:after {
  top: 0px;
  border-top: 1px solid var(--border-color);
}

.border-bottom:after {
  bottom: -1px;
  border-bottom: 1px solid var(--border-color);
}

.border-right {
  border-right-color: var(--border-color);
}

.label-container {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.label {
  pointer-events: none;
  color: white;
  text-shadow: -1px -1px 0 var(--contrast-color),  
    1px -1px 0 var(--contrast-color),
    -1px 1px 0 var(--contrast-color),
    1px 1px 0 var(--contrast-color);

  @include int.overline();
}