.wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x3);
}

.container {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x5);
}

.rooms {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x1);
}

.list {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x1);
  list-style: none;
  margin: 0;
  padding: var(--Space-x05) 0 0;
}

.checkbox {
  background: var(--Background-Primary);
  border: 2px solid transparent;
  border-radius: var(--Corner-radius-md);
  padding: var(--Space-x2) var(--Space-x15);
}

.checkbox:has(input:checked) {
  border-color: var(--Border-Interactive-Selected);
}

.checkbox:has(input:checked) span[class*="checkbox_checkbox_"] {
  background-color: var(--Surface-UI-Fill-Active);
}

.checkbox:has(input:disabled) {
  background-color: var(--Surface-UI-Fill-Disabled);
  border: 1px solid var(--Border-Interactive-Disabled);
  cursor: not-allowed;
}

.checkbox:has(input:disabled) .chip {
  background-color: var(--Surface-UI-Fill-Disabled);
  border: 1px solid var(--Text-Interactive-Disabled);
}

.checkbox:has(input:disabled) p {
  color: var(--Text-Interactive-Disabled);
}

.room {
  align-items: center;
  display: grid;
  gap: var(--Space-x1);
  grid-template-columns: auto 1fr auto;
  width: 100%;
}

.chip {
  background-color: var(--Surface-Brand-Accent-Default);
  border-radius: var(--Corner-radius-sm);
  padding: var(--Space-x1);
}

.chipText {
  color: var(--Text-Heading);
}
