.checkboxGroup {
  display: grid;
  gap: var(--Space-x15);
}

.checkboxWrapper {
  display: grid;
  gap: var(--Space-x05);
}

.checkboxField {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--Space-x15);
  padding: var(--Space-x1) var(--Space-x15);
  cursor: pointer;
  border-radius: var(--Corner-radius-md);
  transition: background-color 0.3s;
  color: var(--Text-Default);

  &[data-disabled] {
    cursor: unset;

    .checkbox {
      border-color: var(--Border-Interactive-Disabled);
      background-color: var(--Surface-UI-Fill-Disabled);
    }

    .text {
      color: var(--Base-Text-Disabled);
    }
  }

  &:hover:not([data-disabled]) {
    background-color: var(--UI-Input-Controls-Surface-Hover);
  }

  &[data-focus-visible] .checkbox {
    /* Used this value as it makes sense from a token name perspective and has a good contrast, but we need to decide for a default ui state */
    outline: 2px solid var(--Border-Interactive-Focus);
    outline-offset: 2px;
  }

  &[data-selected] .checkbox {
    border-color: var(--Surface-UI-Fill-Active);
    background-color: var(--Surface-UI-Fill-Active);
  }
}

.checkbox {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 1px solid var(--Border-Interactive-Default);
  border-radius: var(--Corner-radius-sm);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--Surface-UI-Fill-Default);
}

.text {
  color: var(--Text-Default);
}

@media screen and (max-width: 767px) {
  .checkboxField:hover:not([data-disabled]) {
    background-color: transparent;
  }

  .checkboxField[data-selected] {
    background-color: transparent;
  }
}
