@value colors: "../../variables/colors.css";
@value white from colors;
@value dark from colors;
@value cm_grey_150 from colors;
@value cm_grey_200 from colors;
@value black from colors;
@value cm_primary_blue from colors;
@value cm_blue_600 from colors;

.container {
  display: flex;
  align-items: center;
  align-content: flex-start;
  gap: 16px;
  font-family: "Gilroy";
  font-weight: bold;
  font-size: 18px;
  color: black;
}

.container input {
  display: none;
}

.icon {
  display: none;

  color: white;
}

.label {
  border: solid 1px cm_grey_200;
  background-color: cm_grey_150;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.container:hover .label {
  border: 1px solid cm_primary_blue;
}

.checkbox:checked + .label {
  border: solid 1px cm_primary_blue;
  background-color: cm_primary_blue;
}

.checkbox:checked:hover + .label {
  background-color: cm_blue_600;
}

.checkbox:checked + .label .icon {
  display: flex;
}