@use "../../../../../styles/colors.scss";
@use "../../../../../styles/typography.scss";
@use "../../../../../styles/container_breakpoints.scss";
@use "../../../../../styles/spacing.scss";

.container {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0%;
  position: relative;
  padding: 0 var(--gap);

  @include container_breakpoints.container-at-least("sm") {
    --gap: calc(#{spacing.$spacing-1} / 4);
  }  

  @include container_breakpoints.container-at-least("lg") {
    --gap: calc(#{spacing.$spacing-1} / 2);
  }

  .bar {
    width: 100%;
    height: 100%;
    background-color: colors.$warmgray-20;
  }

  &.is-highlighted {
    .bar {
      background-color: colors.$warmgray-100;
    }
  }
  --gap: calc(#{spacing.$spacing-1} / 8);
}

.state-label {
  display: none;

  &.visible {
    display: inline-block;
  }
}

.top-label {
  display: none;
  
  @include container_breakpoints.container-at-least("sm") {
    &.visible {
      display: inline-block;
    }
  }
}