.label {
  display: flex;
  align-items: center;
  gap: var(--Spacing-x-half);
  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
  border: 1px solid var(--Base-Border-Subtle);
  border-radius: var(--Corner-radius-Small);
  background-color: var(--Base-Surface-Secondary-light-Normal);
  cursor: pointer;
}

.label[data-selected="true"],
.label[data-selected="true"]:hover {
  background-color: var(--Primary-Light-Surface-Normal);
  border-color: var(--Base-Border-Hover);
}

.label:hover {
  background-color: var(--Base-Surface-Primary-light-Hover-alt);
  border-color: var(--Base-Border-Subtle);
}

.label[data-disabled="true"] {
  background-color: var(--Base-Button-Primary-Fill-Disabled);
  border-color: var(--Base-Button-Primary-Fill-Disabled);
  cursor: not-allowed;
}

.caption {
  display: none;
}

@media (min-width: 768px) {
  .caption {
    display: block;
  }
}
