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

.statesContainer{
  display: flex;
  flex-wrap: wrap;
  gap: int.$spacing-1;
}

.fullyClosed{
  text-align: center;
  min-width: int.$spacing-8;
  display: inline-block;
  border: 1px solid int.$gop-alt04-40;
  padding: int.$spacing-1;
  background: int.$gop-alt04-20;
  @include int.shadow($size: "100");

  &:hover {
    background-color: int.$gop-alt04-30;
  }
}

.partiallyClosed{
  text-align: center;
  min-width: int.$spacing-8;
  display: inline-block;
  padding: int.$spacing-1;
  border: 1px dashed int.$warmgray-90;
  @include int.shadow($size: "100");

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

.closingSoon{
  text-align: center;
  min-width: int.$spacing-8;
  display: inline-block;
  padding: int.$spacing-1;
  border: 1px dashed int.$warmgray-100;
  background: int.$warmgray-10;
  
  &:hover {
    background-color: int.$warmgray-20;
  }
}