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

.state-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  height: var(--container-h, 100%);
  width: 100%;
  row-gap: 2px;

  @include int.container-at-least("lg") {
    height: 100px;
    column-gap: 2px;
    flex-direction: row;
  }

  > div:not([class]) {
    width: 100%;
    height: 100%;
  }
}

.state-box-container {
  background-color: int.$warmgray-20;
  min-height: int.$spacing-1;
  display: flex;
  flex-direction: column;
  position: relative;
  flex-basis: var(--size-basis);
  flex-grow: 1;
  transition: opacity 150ms ease;

  @include int.container-at-least("lg") {
    min-width: int.$spacing-1;
    height: 100%;
    flex-direction: row;
  }
}

.fade {
  opacity: 40%;
}

.delegate-box {
  background-color: var(--deli-bg);
  flex-grow: 1;
  color: var(--deli-fg, int.$warmgray-90);
  transition: background-color 500ms ease-in-out;
}

.state-label {
  color: var(--deli-fg, int.$warmgray-90);
  position: absolute;
  bottom: int.$spacing-1;
  left: int.$spacing-1;
  transition: color 500ms ease-in-out;

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