/* Bricks checkbox/radio i to kolonner, clean/default styling - reelt markup:
   div[role="group"|"radiogroup"] > ul.options-wrapper > li > input + label
   Nulstiller browser-standard fieldset/border (den gule stiplede kant)

   FARVE: skift --checkbox-text-color herunder hvis formularen ligger på mørk baggrund
   (fx til #ffffff) - så følger både tekst og checkbox-ramme automatisk med. */

%root% {
  --checkbox-text-color: #333333;
}

%root% div[role="group"],
%root% div[role="radiogroup"] {
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

%root% div[role="group"] ul.options-wrapper,
%root% div[role="radiogroup"] ul.options-wrapper {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px 16px !important;
  list-style: none !important;
  margin: 8px 0 10px 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
}

%root% div[role="group"] ul.options-wrapper > li,
%root% div[role="radiogroup"] ul.options-wrapper > li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Ikonet skal aldrig krympe, teksten wrapper pænt under sig selv (ikke under ikonet) */
%root% div[role="group"] ul.options-wrapper input,
%root% div[role="radiogroup"] ul.options-wrapper input {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: 2px !important;
  accent-color: #225581 !important;
  cursor: pointer !important;
}

%root% div[role="group"] ul.options-wrapper label,
%root% div[role="radiogroup"] ul.options-wrapper label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  color: var(--checkbox-text-color) !important;
}

/* To og to fra 768px og op: laptop, desktop og liggende iPad (1024px) */
@media (min-width: 768px) {
  %root% div[role="group"] ul.options-wrapper,
  %root% div[role="radiogroup"] ul.options-wrapper {
    grid-template-columns: 1fr 1fr !important;
  }
  %root% div[role="group"] ul.options-wrapper label,
  %root% div[role="radiogroup"] ul.options-wrapper label {
    font-size: 14px !important;
  }
}