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

.cell-bar {
  width: 100%;
  height: 56px;
  padding: int.$spacing-3 0 int.$spacing-3 int.$spacing-1;

  &.any-met-threshold {
    padding: int.$spacing-3 int.$spacing-1;

    @include int.container-at-least("sm") {
      padding: int.$spacing-3 int.$spacing-2 int.$spacing-3 int.$spacing-1;
    }
  }
}

.bar-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.bar-foreground {
  height: 100%;
  background-color: var(--election-palette-main, int.$warmgray-20);
}

.bar-background {
  height: 100%;
  background-color: int.$warmgray-20;

  &.has-border {
    border-left: 2px solid white;
  }

  &.dropout {
    background-color: int.$warmgray-10
  }
}

.bar-background,
.bar-foreground {
  transition: width 500ms ease-in-out;
}