.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-bg-primary);
  padding: 12px;
  border: solid 1px var(--color-border-primary);
  border-radius: var(--border-radius-xs);

  .group-item {
    .checkbox-description-list {
      margin: 5px 0;

      .checkbox-description {
        font-size: var(--font-size-xs);
        color: var(--color-text-quaternary);
      }
    }
  }
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  user-select: none;

  input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    width: 18px;
    height: 18px;
    border-radius: var(--border-radius-xs);
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;

    &:checked {
      background: var(--color-bg-brand-solid);
      border-color: var(--color-bg-brand-solid);
    }

    &:checked::before {
      content: "\f00c"; /* fa-check */
      font-family: var(--font-family-icons);

      font-size: 12px;
      color: var(--color-text-primary_on-brand);
    }

    &:hover {
      border-color: var(--color-border-selected);
    }

    &:focus-visible {
      outline: 2px solid var(--color-border-selected-secondary);
      outline-offset: 2px;
    }

    &:disabled {
      background: var(--color-bg-disabled);
      border-color: var(--color-border-disabled);
      cursor: not-allowed;

      &:checked::before {
        color: var(--color-fg-brand-secondary) !important;
      }
    }
  }

  .checkbox-label {
    flex: 1;
    cursor: pointer;
    user-select: none;
    border-radius: var(--border-radius-xs);
    font-size: var(--font-size-md) !important;
    color: var(--color-text-primary) !important;
    margin: 0 !important;
    margin-left: 8px !important;
  }
}