@intility/bifrost-css/dist/bifrost-components.css

@charset "UTF-8";
/* stylelint-disable selector-class-pattern */
.bf-textarea-container,
.bf-input-container,
.bf-select-container,
.bf-datepicker-container {
  font-size: var(--bf-font-size-m);
}

/* REQUIRED TEXT */
.bf-label-required {
  color: var(--bfc-base-c-2);
  font-weight: normal;
  font-style: italic;
  margin-left: var(--rem4);
}

/* DESCRIPTION */
.bf-label-description {
  color: var(--bfc-base-c-2);
  font-weight: normal;
  font-size: var(--bf-font-size-m);
}

/* PLACEHOLDER TEXT */
.bf-input::placeholder,
.bf-textarea::placeholder,
.bf-datepicker::placeholder {
  color: var(--bfc-base-c-2);
  opacity: 1;
}

/* READ ONLY (:read-only matches all elements, so we limit by prefixing with element) */
:where(input, textarea):is(.bf-input, .bf-textarea, .bf-datepicker):read-only,
:where(input, textarea):is(.bf-input,
.bf-textarea,
.bf-datepicker):read-only:hover {
  background: var(--bfc-base-2);
  border-color: var(--bfc-base-c-dimmed);
  outline: none;
  box-shadow: none;
  cursor: text;
}

:is(.bf-input, .bf-textarea, .bf-datepicker):read-only:focus {
  border-color: var(--bfc-base-c-wcag);
  box-shadow: inset 0 0 0 1px var(--bfc-base-c-wcag);
}

/* DISABLED */
:is(.bf-input, .bf-textarea, .bf-datepicker):is(:disabled, :disabled:hover),
.bf-fieldgroup-disabled .bf-fieldgroup-item > div {
  cursor: default;
  color: var(--bfc-base-c-disabled);
  border-color: var(--bfc-base-c-dimmed);
  background: var(--bfc-base);
}

:is(.bf-input, .bf-datepicker, .bf-textarea):disabled::placeholder {
  color: var(--bfc-base-c-disabled);
}

/* DISABLED LABEL ICON */
.bf-label > .bf-input-disabled-icon {
  color: var(--bfc-base-c-disabled);
  margin: 0 var(--rem4);
}

/* INPUT FIELD */
.bf-textarea,
.bf-input,
.bf-select,
.bf-datepicker {
  background: var(--bfc-base-3);
  color: var(--bfc-base-c);
  border: 1px solid var(--bfc-base-c-wcag);
  border-radius: var(--bf-radius-s);
  font-family: inherit;
  font-size: var(--bf-font-size-l);
  padding: 0.4375rem 12px; /* 7px */
  width: 100%;
}

/* INPUT FIELD HOVER */
.bf-textarea:hover,
.bf-input:hover,
.bf-select:hover,
.bf-datepicker:hover {
  border-color: var(--bfc-base-c);
}

/* INPUT FIELD FOCUS */
.bf-textarea:focus,
.bf-input:focus,
.bf-select:focus,
.bf-input-focus,
.bf-datepicker:focus {
  border-color: var(--bfc-base-c-inverted);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--bfc-base-c-inverted);
}

/* loading spinner */
.bf-input-loading-icon {
  font-size: var(--bf-font-size-l);
}

.bf-input-icon-button .bf-input-loading-icon {
  color: inherit;
}

.bf-select-container .bf-input-loading-icon {
  margin-top: 3px;
  margin-right: 3px;
}

/* FEEDBACK TEXT */
.bf-label-feedback {
  color: var(--bfc-base-c);
  text-align: right;
  font-size: var(--bf-font-size-s);
  margin-top: 4px;
}

.bf-input-alert .bf-label-feedback,
.bf-select-alert .bf-label-feedback,
.bf-textarea-alert .bf-label-feedback,
.bf-datepicker-alert .bf-label-feedback,
.bf-file-input-area-alert .bf-label-feedback,
.bf-fieldgroup-alert + .bf-label-feedback {
  color: var(--bfc-base-c-alert);
}

.bf-label-feedback > :first-child {
  margin: 0;
}

/* ALERT BORDER COLOR */
.bf-input-alert .bf-input,
.bf-textarea-alert .bf-textarea,
.bf-select-alert .bf-select__control,
.bf-datepicker-alert .bf-datepicker {
  border-color: var(--bfc-base-c-alert);
}

.bf-input-alert .bf-input:hover,
.bf-textarea-alert .bf-textarea:hover,
.bf-select-alert .bf-select__control:hover,
.bf-datepicker-alert .bf-datepicker:hover {
  border-color: var(--bfc-alert-2);
}

.bf-input-alert .bf-input:focus,
.bf-textarea-alert .bf-textarea:focus,
.bf-select-alert .bf-select__control.bf-select__control--is-focused,
.bf-datepicker-alert .bf-datepicker:focus {
  border-color: var(--bfc-base-c-inverted);
  box-shadow: inset 0 0 0 1px var(--bfc-base-c-inverted);
}

/* ALERT SVG COLOR */
.bf-textarea-alert svg,
.bf-datepicker-alert svg {
  color: var(--bfc-base-c-alert);
}

/* label, fieldset and legend */
.bf-fieldset,
:where(.bf-content, .bf-elements) fieldset {
  padding: 0;
  margin: 0;
  border: none;
}

.bf-legend,
:where(.bf-content, .bf-elements) legend {
  font-size: var(--bf-font-size-h3);
  color: var(--bfc-base-c-2);
  padding: 0;
  margin: 0;
}

:where(.bf-content) legend {
  margin: 0 0 var(--bfs16) 0;
}

.bf-label,
:where(.bf-content, .bf-elements) label {
  font-size: var(--bf-font-size-m);
  font-weight: 600;
  color: var(--bfc-base-c);
  display: block;
}

.bf-label-disabled,
.bf-fieldset:disabled .bf-label {
  color: var(--bfc-base-c-disabled);
}

/* space between label and input */
.bf-legend.bf-label,
:where(.bf-content, .bf-elements) legend.bf-label {
  margin: 0 0 var(--bfs4) 0;
}

.bf-label ~ :is(.bf-input,
.bf-select,
.bf-input-icon-container,
.bf-textarea,
.bf-textarea-icon-container,
.bf-datepicker-icon-container) {
  /* react <Select> gets this space from selectStyles object. See Select.tsx */
  margin-top: var(--bfs4);
}

/* #region native <select> styling (see Select.tsx for react <Select> component styling) */
select.bf-select {
  --bf-select-arrow-color: var(--bfc-base-c-2);
  --bf-select-arrow-size: 6px;
  --bf-select-arrow-padding-right: calc(12px + var(--bf-select-arrow-size));
  /* hide browser-native arrow(s) */
  appearance: none;
  /* roll our own with a trianble background image */
  background-image: linear-gradient(45deg, transparent 50%, var(--bf-select-arrow-color) 50%), linear-gradient(-45deg, transparent 50%, var(--bf-select-arrow-color) 50%);
  background-position: calc(100% - var(--bf-select-arrow-padding-right)) calc(1em + 1px), calc(100% - var(--bf-select-arrow-padding-right) + var(--bf-select-arrow-size)) calc(1em + 1px);
  background-size: var(--bf-select-arrow-size) var(--bf-select-arrow-size), var(--bf-select-arrow-size) var(--bf-select-arrow-size);
  background-repeat: no-repeat;
  padding-right: 32px;
}

select.bf-select:hover {
  --bf-select-arrow-color: var(--bfc-base-c);
}

/* all <option> styling is ignored completely on MacOS and iOS */
select.bf-select option {
  color: var(--bfc-base-c);
}

/* only seems to work for chromium on windows */
select.bf-select option:checked {
  font-weight: 600;
}

/* gray text for the value-less option */
select.bf-select option:where([value=""], :not([value])) {
  color: var(--bfc-base-c-2);
}

/* gray text for select with a value-less option currently selected, actually works everywhere? */
select.bf-select:has(option:checked:where([value=""], :not([value]))) {
  color: var(--bfc-base-c-2);
}

/* #endregion */
/* #region small input */
.bf-input-small .bf-input {
  height: var(--rem32);
  padding: 0.1875rem 8px;
}

.bf-input-small .bf-input-icon,
.bf-input-small .bf-state-icon,
.bf-input-small .bf-input-clear-icon {
  padding-block: 0;
  height: var(--rem24);
  width: var(--rem24);
}

/* #endregion */
/* #region react-select 5.7.7
todo: remove in 6.0 */
.bf-select__control {
  min-height: var(--rem40);
}

.bf-select-container .bf-select__value-container {
  padding: var(--rem2) 12px;
}

.bf-select__indicators {
  padding: 0.469rem 0; /* 7.5px */
}

.bf-select-small .bf-select__control {
  min-height: var(--rem32);
}

.bf-select-small .bf-select__input-container {
  margin-block: 0;
}

.bf-select-small .bf-select__value-container {
  padding: 0 8px;
}

.bf-select-small .bf-select__indicators {
  padding-block: 0.2187rem; /* 3.5px */
}

.bf-select-small .bf-select__dropdown-indicator {
  margin-right: 4px;
}

/* #endregion */
:where(.bf-section-header) {
  padding: var(--rem8) var(--bfs16);
  border-bottom: var(--bf-border);
  border-top-left-radius: var(--bf-radius);
  border-top-right-radius: var(--bf-radius);
  min-height: 3.3125rem; /* 53px */
  display: flex;
  align-items: center;
  font-weight: 600;
}

:where(.bf-section-header.bf-no-padding) {
  padding: 0;
}

/* stretch content wrapper so arrow will be pushed to the right */
:where(.bf-section-header > :first-child) {
  flex: 1 1;
}

/* make sure link focus outline will be displayed */
:where(a:has(.bf-section-header)) {
  display: block;
}

.bf-box-arrow,
.bf-box-arrow-external {
  color: var(--bfc-base-c-2);
  translate: 0;
  transition-property: translate, color;
  transition-duration: var(--bf-animation-duration);
  transition-timing-function: var(--bf-timing-function);
}

:is(a, button):hover .bf-box-arrow {
  color: var(--bfc-base-c);
  translate: 3px 0;
}

.bf-box-arrow-external {
  rotate: -45deg;
}

:is(a, button):hover .bf-box-arrow-external {
  color: var(--bfc-base-c);
  translate: 2px -2px;
}

.bf-button {
  --bf-button-border-color: var(--bfc-base-c-theme);
  --bf-button-border-radius: var(--bf-radius-s);
  border: 1px solid var(--bf-button-border-color);
  border-radius: var(--bf-button-border-radius);
  background: var(--bfc-base-3);
  line-height: 1.5;
  color: var(--bfc-base-c);
  padding: 0.5312rem 16px; /* 8.5px */
  font-size: var(--bf-font-size-m);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-width: var(--rem40);
  /* required for positioning ::before outline on hover, and z-index on focus */
  position: relative;
}

:where(a).bf-button {
  display: inline-block;
  text-align: center;
  text-decoration-line: none;
}

.bf-button:where(:focus) {
  outline: none;
}

.bf-button:where(:hover:not(:disabled, .bf-button-filled, .bf-button-flat))::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--bf-button-border-radius) - 1px);
  outline: 2px solid var(--bf-button-border-color);
  outline-offset: -1px;
}

.bf-button:where(:active:hover:not(:disabled)) {
  will-change: scale;
  scale: 0.95;
}

/* stretch clickable area while scaling down the button to make sure edges are clickable */
.bf-button:where(:active:hover:not(:disabled))::after {
  content: "";
  position: absolute;
  inset: 0;
  /* need to increase by sligtly more than 0.05 because  is a lower size after scaling parent to 0.95 */
  scale: 1.06;
}

.bf-button:where(:focus-visible) {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  z-index: 1;
}

.bf-button:disabled {
  opacity: 0.3;
  cursor: default;
}

.bf-button-pill {
  --bf-button-border-radius: var(--rem24);
}

.bf-button-small {
  padding-block: 0.2812rem; /* 4.5px */
  padding-inline: 12px;
  min-width: var(--rem32);
}

.bf-button-nopadding {
  padding-inline: 0;
}

.bf-button-inactive:hover {
  color: var(--bfc-base-c);
}

.bf-button-inactive,
.bf-button-inactive:disabled {
  --bf-button-border-color: var(--bfc-base-dimmed);
  color: var(--bfc-base-c-2);
}

.bf-button-alert {
  --bf-button-border-color: var(--bfc-alert);
}

.bf-button-neutral {
  --bf-button-border-color: var(--bfc-neutral);
}

.bf-button-inverted {
  --bf-button-border-color: var(--bfc-base-3);
  background: var(--bfc-base-c-inverted);
  color: var(--bfc-base-3);
}

.bf-button-inverted:focus-visible {
  outline-color: var(--bfc-base-3);
}

.bf-button-flat,
:is(.bf-button-filled, .bf-button-flat):is(:hover, :active:hover) {
  --bf-button-border-color: transparent;
}

.bf-button-filled:hover {
  background: var(--bfc-theme-2);
}

.bf-button-filled,
.bf-button-filled:disabled {
  background: var(--bfc-theme);
  color: var(--bfc-theme-hc);
}

.bf-button-filled.bf-button-inactive:hover {
  background: var(--bfc-base-dimmed-3);
  color: var(--bfc-base-c);
}

.bf-button-filled.bf-button-inactive,
.bf-button-filled.bf-button-inactive:disabled {
  --bf-button-border-color: transparent;
  background: var(--bfc-base-dimmed-2);
  color: var(--bfc-base-c-2);
}

.bf-button-filled.bf-button-alert:hover {
  background: var(--bfc-alert-2);
}

.bf-button-filled.bf-button-alert,
.bf-button-filled.bf-button-alert:disabled {
  background: var(--bfc-alert);
  color: var(--bfc-alert-c);
}

.bf-button-filled.bf-button-neutral:hover {
  background: var(--bfc-neutral-2);
}

.bf-button-filled.bf-button-neutral,
.bf-button-filled.bf-button-neutral:disabled {
  background: var(--bfc-neutral);
  color: var(--bfc-neutral-hc);
  --bf-button-border-color: var(--bfc-neutral);
}

.bf-button-filled.bf-button-inverted:hover {
  background: var(--bfc-base-dimmed);
}

.bf-button-filled.bf-button-inverted,
.bf-button-filled.bf-button-inverted:disabled {
  background: var(--bfc-base);
  color: var(--bfc-base-c);
}

.bf-button-flat:hover {
  background: var(--bfc-theme-c);
  color: var(--bfc-theme);
}

.bf-button-flat,
.bf-button-flat:disabled {
  background: none;
  color: var(--bfc-base-c-theme);
}

.bf-button-flat.bf-button-inactive:hover {
  background: var(--bfc-base-dimmed-2);
}

.bf-button-flat.bf-button-inactive,
.bf-button-flat.bf-button-inactive:disabled {
  background: none;
  color: var(--bfc-base-c-2);
}

.bf-button-flat.bf-button-alert:hover {
  background: var(--bfc-alert-fade);
  color: var(--bfc-alert-fade-c);
}

.bf-button-flat.bf-button-alert,
.bf-button-flat.bf-button-alert:disabled {
  background: none;
  color: var(--bfc-base-c-alert);
}

.bf-button-flat.bf-button-neutral:hover {
  background: var(--bfc-neutral-c);
}

.bf-button-flat.bf-button-neutral,
.bf-button-flat.bf-button-neutral:disabled {
  background: none;
  color: var(--bfc-base-c);
}

.bf-button-flat.bf-button-inverted:hover {
  background: var(--bfc-base-c-inverted-3);
}

.bf-button-flat.bf-button-inverted,
.bf-button-flat.bf-button-inverted:disabled {
  background: none;
  color: var(--bfc-base);
}

.bf-button-group {
  padding: 0.1875rem; /* 3px */
  border: 1px solid var(--bfc-base-c-wcag);
  border-radius: var(--bf-radius-s);
  background: var(--bfc-base-3);
  display: inline-flex;
  flex-wrap: nowrap;
}

.bf-button-group .bf-button {
  --bf-button-border-radius: var(--bf-radius-xs);
  --bf-button-border-color: transparent;
  margin-right: 4px;
  padding: 0.2187rem 12px; /* 3.5px */
  color: var(--bfc-base-c);
  border: 0.125rem dotted var(--bf-button-border-color); /* 2px */
  transition: none;
  font-weight: 600;
}

.bf-button-group .bf-button:where(:hover:not(:disabled)) {
  background-color: var(--bfc-base-dimmed-2);
}

.bf-button-group .bf-button:last-child {
  margin-right: 0;
}

.bf-button-group .bf-button-selected,
.bf-button-group .bf-button-selected:where(:hover:not(:disabled)),
.bf-button-group .bf-button-selected:focus-visible {
  background-color: var(--bfc-theme);
  color: var(--bfc-theme-hc);
}

.bf-button-group .bf-button-selected:where(:hover:not(:disabled)) {
  background-color: var(--bfc-theme-2);
}

.bf-button-group .bf-button-inactive {
  background-color: var(--bfc-base-3);
  color: var(--bfc-base-c-2);
}

.bf-button-group .bf-button:focus-visible {
  --bf-button-border-radius: var(--bf-radius-s);
  border-color: var(--bfc-base-c);
  outline: none;
}

.bf-button-group .bf-button-selected:focus-visible {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--bfc-base-3), inset 0 0 0 1000px var(--bfc-theme);
}

.bf-button-group .bf-button-selected:focus-visible:where(:hover:not(:disabled)) {
  box-shadow: inset 0 0 0 1px var(--bfc-base-3), inset 0 0 0 1000px var(--bfc-theme);
}

.bf-button-expand.bf-neutral-link {
  font-size: var(--bf-font-size-m);
}

.bf-button-expand:hover .bf-expand-icon-wrapper {
  background-color: var(--bfc-base-dimmed);
}

.bf-button-expand:focus-visible .bf-expand-icon-wrapper {
  outline: 2px dotted var(--bfc-base-c);
}

button.bf-button-expand.bf-neutral-link:focus-visible {
  outline: none;
}

.bf-expand-icon-wrapper + .bf-neutral-link-text {
  margin-left: var(--bfs8);
}

:root {
  --bf-switch-height: 1.5rem;
  --bf-switch-width: 2.75rem;
  --bf-checkbox-text-space: 0.5rem;
  /* paddings used for button (and button small), default 0 */
  --bf-checkbox-padding-x: 0px;
  --bf-checkbox-padding-y: 0px;
}

.bf-checkbox {
  /* font awesome icon size + text space */
  --bf-checkbox-space: calc(
    1.125rem + var(--bf-checkbox-text-space) + var(--bf-checkbox-padding-x)
  );
  font-size: var(--bf-font-size-m);
  display: inline-block;
  padding: var(--bf-checkbox-padding-y) var(--bf-checkbox-padding-x) var(--bf-checkbox-padding-y) var(--bf-checkbox-space);
  position: relative;
  border-radius: var(--bf-radius-s);
  line-height: var(--rem24);
  font-weight: normal;
}

.bf-checkbox-icon {
  color: var(--bfc-base-c-2);
  position: absolute;
  left: var(--bf-checkbox-padding-x);
  display: inline-block;
  scale: 1.3;
  padding-inline: 1px;
}

.bf-checkbox-checked,
.bf-checkbox-checked:hover {
  color: var(--bfc-theme);
}

.bf-checkbox:hover {
  color: var(--bfc-base-c);
}

.bf-checkbox:hover:not(:has(:disabled)) .bf-checkbox-icon svg {
  scale: 1.1;
}

.bf-checkbox input:checked ~ * .bf-checkbox-unchecked {
  display: none;
}

.bf-checkbox input:not(:checked) ~ * .bf-checkbox-checked {
  display: none;
}

.bf-checkbox input {
  /* you cannot focus on a field with
   * visibility: hidden; or display: none;
  * so we hide the input some other way */
  position: absolute;
  opacity: 0;
  inset: 0;
}

.bf-checkbox input:not(:disabled),
.bf-checkbox:has(input:not(:disabled)) {
  cursor: pointer;
}

/* focus state */
.bf-checkbox:has(input:focus-visible) {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

/* checkbox align right (left is default) */
.bf-checkbox-right.bf-checkbox {
  padding-left: var(--bf-checkbox-padding-x);
  padding-right: var(--bf-checkbox-space);
}

.bf-checkbox-right :is(.bf-checkbox-icon, .bf-switch) {
  left: auto;
  right: var(--bf-checkbox-padding-x);
}

/* button style */
.bf-checkbox-button {
  --bf-checkbox-padding-x: 16px;
  /* ~40px height when label is a single line */
  --bf-checkbox-padding-y: 0.531rem;
  line-height: 1.5;
}

.bf-checkbox-button.bf-checkbox {
  background-color: var(--bfc-base-3);
  border: 1px solid var(--bfc-base-dimmed);
  border-radius: var(--bf-radius-s);
}

.bf-checkbox-button:hover:where(:not(:has(input:disabled))) {
  background-color: var(--bfc-base-2);
  border-color: var(--bfc-base-dimmed-3);
}

.bf-checkbox-button.bf-checkbox-small {
  --bf-checkbox-padding-x: 12px;
  /* ~32px height when label is a single line */
  --bf-checkbox-padding-y: 0.28rem;
}

/* switch styles */
.bf-switch-wrapper {
  --bf-switch-thumb-size: calc(var(--bf-switch-height) - 0.25rem);
  /* padding + switch size + text space (icons have a slightly larger box than switch) */
  --bf-checkbox-space: calc(
    var(--bf-checkbox-padding-x) + var(--bf-switch-width) +
      var(--bf-checkbox-text-space) + 0.125rem
  );
}

.bf-switch {
  height: var(--bf-switch-height);
  width: var(--bf-switch-width);
  background-color: var(--bfc-base-c-2);
  border-radius: var(--bf-radius-full);
  position: absolute;
  left: var(--bf-checkbox-padding-x);
  padding: 0.125rem;
}

.bf-switch-thumb {
  width: var(--bf-switch-thumb-size);
  height: 1.25rem;
  line-height: var(--bf-switch-thumb-size);
  text-align: center;
  position: absolute;
  border-radius: var(--bf-radius-full);
  background-color: var(--bfc-base-3);
  left: 0.125rem;
  /* transition short-hand does not work with multiple properties */
  transition-property: background-color, margin-left;
  transition-duration: var(--bf-animation-duration);
  transition-timing-function: var(--bf-timing-function);
  font-size: 0.8rem; /* magic value appears to almost fix centering browser rendering issue */
  color: var(--bfc-base-c-2);
}

/* switched on. account for <Checkbox> and <CheckboxCard> DOM */
:where(.bf-checkbox input:checked) ~ .bf-switch,
:where(.bf-checkboxcard input:checked) ~ * .bf-switch {
  background-color: var(--bfc-theme);
}

/* thumb på hover (ikke disabled) */
:where(.bf-checkbox, .bf-checkboxcard):where(:hover:not(:has(input:disabled))) .bf-switch-thumb {
  scale: 0.9;
}

/* thumb for switch på active+hover, ikke disabled */
:where(.bf-checkbox, .bf-checkboxcard):where(:active:hover:not(:has(input:disabled))) .bf-switch-thumb {
  margin-left: 0.25rem;
}

/* thumb for checked */
:where(.bf-checkbox, .bf-checkboxcard):where(:has(input:checked)) .bf-switch-thumb {
  margin-left: calc(var(--bf-switch-width) - var(--bf-switch-height));
  background-color: var(--bfc-base-3);
  color: var(--bfc-base-c);
}

/* thumb for checked på active+hover, ikke disabled */
:where(.bf-checkbox, .bf-checkboxcard):where(:hover:active:has(input:checked:not(:disabled))) .bf-switch-thumb {
  margin-left: calc(var(--bf-switch-width) - var(--bf-switch-height) - 0.25rem);
}

/* hidden label */
.bf-checkbox-hidelabel .bf-checkbox-text {
  width: 0;
  height: 0;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}

.bf-checkbox-hidelabel .bf-checkbox-icon {
  position: relative;
}

.bf-checkbox-hidelabel {
  /* icon will take up its own space through position: static; */
  --bf-checkbox-space: 0px;
}

.bf-checkbox-hidelabel.bf-switch-wrapper {
  padding: 0 0 0 var(--bf-switch-width);
  border-radius: var(--bf-radius-full);
}

/* disabled */
.bf-checkbox:has(:disabled),
:where(.bf-checkbox, .bf-checkboxcard) :disabled ~ .bf-checkbox-icon {
  opacity: 0.3;
  cursor: default;
}

.bf-checkboxcard {
  --bf-checkboxcard-icon-space: 1.8125rem; /* 29px (21px icon + 8px padding) */
  font-size: var(--bf-font-size-m);
  background-color: var(--bfc-base-3);
  border: 1px solid var(--bfc-base-dimmed);
  border-radius: var(--bf-radius-s);
  display: block;
  overflow: hidden;
  position: relative;
}

.bf-switch-wrapper.bf-checkboxcard {
  --bf-checkboxcard-icon-space: calc(var(--bf-switch-width) + var(--rem8));
}

.bf-checkboxcard:hover:not(:has(input:disabled)) {
  background-color: var(--bfc-base-2);
  border-color: var(--bfc-base-dimmed-3);
}

.bf-checkboxcard input {
  /* you cannot focus on a field with
   * visibility: hidden; or display: none;
  * so we hide it some other way */
  position: absolute;
  opacity: 0;
  inset: 0;
}

.bf-checkboxcard input:not(:disabled),
.bf-checkboxcard:has(input:not(:disabled)) {
  cursor: pointer;
}

.bf-checkboxcard-header {
  background-color: var(--bfc-base-2);
}

.bf-checkboxcard:hover:not(:has(input:disabled)) .bf-checkboxcard-header {
  background-color: var(--bfc-base-1);
}

.bf-checkboxcard-content {
  padding: 12px;
  font-weight: 400;
  color: var(--bfc-base-c-2);
}

.bf-checkboxcard-label-text {
  display: block;
  position: relative;
  margin-bottom: var(--bfs8);
  padding-right: var(--bf-checkboxcard-icon-space);
  color: var(--bfc-base-c);
  font-weight: 600;
}

.bf-checkboxcard-left .bf-checkboxcard-label-text {
  padding-left: var(--bf-checkboxcard-icon-space);
  padding-right: 0;
}

.bf-checkboxcard-no-children .bf-checkboxcard-label-text {
  margin-bottom: 0;
}

/* hover state */
label:hover .bf-checkboxcard-icon {
  color: var(--bfc-theme-2);
}

/* focus state */
.bf-checkboxcard:has(input:focus-visible) {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

/* disabled */
.bf-checkboxcard:has(input:disabled) {
  opacity: 0.3;
  cursor: default;
}

.bf-checkboxcard input:disabled ~ .bf-checkboxcard-header {
  cursor: default;
}

.bf-checkboxcard .bf-checkbox-icon {
  position: absolute;
  right: 0;
  top: 0;
  left: auto;
  scale: 1.3;
}

.bf-checkboxcard:hover:not(:has(input:disabled)) .bf-checkbox-icon svg {
  scale: 1.1;
}

.bf-checkboxcard .bf-switch {
  left: auto;
  right: 0;
}

.bf-checkboxcard-left :is(.bf-switch, .bf-checkbox-icon) {
  right: auto;
  left: 0;
}

.bf-checkboxcard input:checked ~ .bf-checkboxcard-content .bf-checkbox-unchecked {
  display: none;
}

.bf-checkboxcard input:not(:checked) ~ .bf-checkboxcard-content .bf-checkbox-checked {
  display: none;
}

/* also see bifrost-form.css */
.bf-input-icon-container {
  position: relative;
  display: flex;
}

.bf-input {
  height: var(--rem40);
}

.bf-input-icon,
.bf-state-icon,
.bf-input-clear-icon {
  color: var(--bfc-base-c-2);
  position: absolute;
  height: var(--rem32);
  width: var(--rem32);
  margin: var(--rem4);
  padding: var(--rem4) 0;
  text-align: center;
  font-size: var(--bf-font-size-l);
}

.bf-input-disabled .bf-input-icon {
  color: var(--bfc-base-c-disabled);
}

/* click-through on icons to hit input field behind
 * (avoid on button element for `onIconClick`) */
:where(.bf-input-icon, .bf-state-icon):not(button) {
  pointer-events: none;
}

/* #region disabled input (also see bifrost-form.css) */
/* Disabled: search */
.bf-input-disabled .bf-input-icon-button,
.bf-input-disabled .bf-input-icon-button:hover {
  color: var(--bfc-base-c-disabled);
  cursor: default;
}

/* Disabled: search iconButton */
.bf-input-disabled .bf-input-icon-button-filled .bf-input-icon-button,
.bf-input-disabled .bf-input-icon-button-filled .bf-input-icon-button:hover {
  color: var(--bfc-base-3);
  background-color: var(--bfc-base-c);
  opacity: 0.3;
}

/* Disabled: clearable */
.bf-input-disabled .bf-input-clear-icon {
  display: none;
}

/* Disabled: states */
.bf-input-disabled .bf-input-icon-state .bf-state-icon {
  color: var(--bfc-base-c-2);
}

/* #endregion */
.bf-input-icon-left .bf-input-icon,
.bf-input-icon-state .bf-input-icon {
  right: auto;
  left: 0;
}

.bf-input-icon-right .bf-input-icon,
.bf-input-icon-state .bf-state-icon,
.bf-input-clearable .bf-input-clear-icon {
  left: auto;
  right: 0;
}

.bf-input-icon-container .bf-input-state-only {
  padding-left: var(--rem12);
}

.bf-state-icon {
  color: var(--bfc-base-c);
}

.bf-input-success .bf-state-icon {
  color: var(--bfc-base-c-success);
}

.bf-input-alert .bf-state-icon {
  color: var(--bfc-base-c-alert);
}

/* Clickable icon */
.bf-input-icon-button {
  background-color: transparent;
  font-size: var(--bf-font-size-l);
  border: 2px dotted transparent;
  border-radius: var(--bf-radius-xs);
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  outline: none;
  cursor: pointer;
}

/* make clickable area larger without changing the button appearance,
avoids input hover effect when hovering right next to button */
.bf-input-icon-button::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.bf-input-icon-button:focus-visible {
  border-color: var(--bfc-base-c);
  border-radius: var(--bf-radius-s);
}

/* Clickable icon with rightIcon prop */
.bf-input-icon-right .bf-input-icon-button {
  left: auto;
  right: 0;
}

.bf-input-icon-button:is(:hover, :active) {
  color: var(--bfc-base-c);
}

/* IconButton prop */
.bf-input-icon-button-filled .bf-input-icon-button {
  --bf-input-icon-button-filled-bg: var(--bfc-theme);
  background-color: var(--bf-input-icon-button-filled-bg);
  color: var(--bfc-theme-hc);
}

.bf-input-icon-button-filled .bf-input-icon-button:hover {
  --bf-input-icon-button-filled-bg: var(--bfc-theme-2);
}

.bf-input-icon-button-filled .bf-input-icon-button:active {
  scale: 0.95;
}

.bf-input-icon-button-filled .bf-input-icon-button:focus-visible {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--bfc-base-3), inset 0 0 0 1000px var(--bf-input-icon-button-filled-bg);
  border-color: var(--bfc-base-c);
}

.bf-input-icon-button svg {
  vertical-align: unset;
}

/* "X" clear icon */
.bf-input-clear-icon {
  cursor: pointer;
}

.bf-input-clear-icon:hover {
  color: var(--bfc-base-c);
}

/* #region spacing and positioning for icons
32 px wide icon + 4px margin each side = 40px */
.bf-input-icon-right .bf-input,
.bf-input-icon-state .bf-input,
.bf-input-clearable .bf-input:enabled {
  padding-right: 2.375rem; /* 38px */
}

.bf-input-icon-left .bf-input {
  padding-left: 2.375rem; /* 38px */
}

/* two icons on right-hand side */
.bf-input-icon-right.bf-input-clearable .bf-input:enabled,
.bf-input-icon-state.bf-input-clearable .bf-input:enabled {
  padding-right: 4.25rem; /* 68px */
}

/* move clear icon when there is also another icon on right-hand side */
.bf-input-icon-right .bf-input-clear-icon,
.bf-input-icon-state .bf-input-clear-icon {
  right: var(--rem32);
}

/* #endregion */
/* #region spacing and positioning for icons
32 px wide icon + 4px margin each side = 40px */
.bf-input-small .bf-input-icon-right .bf-input,
.bf-input-small .bf-input-icon-state .bf-input,
.bf-input-small .bf-input-clearable .bf-input:enabled {
  padding-right: 1.875rem; /* 30px */
}

.bf-input-small .bf-input-icon-left .bf-input {
  padding-left: 1.875rem; /* 30px */
}

/* two icons on right-hand side */
.bf-input-small .bf-input-icon-right.bf-input-clearable .bf-input:enabled,
.bf-input-small .bf-input-icon-state.bf-input-clearable .bf-input:enabled {
  padding-right: 3.25rem; /* 52px */
}

/* move clear icon when there is also another icon on right-hand side */
.bf-input-small .bf-input-icon-right .bf-input-clear-icon,
.bf-input-small .bf-input-icon-state .bf-input-clear-icon {
  right: 1.69rem; /* 27px */
}

/* #endregion */
/* also see bifrost-form.css */
.bf-textarea-container {
  max-width: 100%;
}

.bf-textarea-icon-container {
  white-space: nowrap;
  position: relative;
  font-size: var(--bf-font-size-l);
}

.bf-textarea-icon-container .bf-textarea-icon,
.bf-textarea-icon-container svg {
  position: absolute;
  vertical-align: top;
  top: var(--bfs12);
  right: var(--bfs24);
}

.bf-textarea {
  display: block;
  resize: vertical;
  height: 100px;
  width: 100%;
  min-width: 200px;
  min-height: 50px;
  max-width: 100%;
  max-height: 500px;
  overflow-y: auto;
  cursor: auto;
  padding-block: 7px;
}

.bf-textarea-icon-container .bf-textarea {
  padding-right: var(--bfs40);
}

/* DISABLED */
/* Also see bifrost-form.css */
.bf-textarea-disabled .bf-textarea-icon-container textarea {
  background: var(--bfc-base);
  border: 1px solid var(--bfc-base-c-dimmed);
}

.bf-textarea-disabled .bf-textarea-icon-container textarea::placeholder {
  color: var(--bfc-base-c-disabled);
  opacity: 1;
}

/* Disabled: states */
.bf-textarea-disabled .bf-textarea-icon-state svg {
  color: var(--bfc-base-c-2);
}

/* stylelint-disable selector-class-pattern */
/* Component label */
fieldset legend.bf-label.bf-fieldgroup-legend {
  margin: 0;
  padding: 0;
}

/* Component */
.bf-fieldgroup {
  display: flex;
  position: relative;
  width: 100%;
}

/* FieldGroup.Item */
.bf-fieldgroup-item {
  flex-grow: 0;
}

.bf-fieldgroup-item > div {
  color: var(--bfc-base-c);
  background-color: var(--bfc-base);
  cursor: default;
}

/* Override default bf-input hover effect */
.bf-fieldgroup:not(.bf-fieldgroup-disabled, .bf-fieldgroup-readonly) .bf-fieldgroup-item .bf-input:hover {
  border-color: var(--bfc-base-c-wcag);
}

/* Set margin top if fieldgroup has label or description */
.bf-label-description ~ .bf-fieldgroup,
.bf-label ~ .bf-fieldgroup {
  margin-top: var(--bfs4);
}

/* Remove border radius
 * todo: remove .bf-select__* in 6.0 */
.bf-fieldgroup .bf-select__control,
.bf-fieldgroup .bf-input,
.bf-fieldgroup-item > div {
  border-radius: 0;
}

/* All children */
.bf-fieldgroup .bf-input-container,
.bf-fieldgroup .bf-select-container,
.bf-fieldgroup .bf-datepicker-container {
  flex-grow: 1;
}

/* remove double borders between items by overlapping with 1px */
.bf-fieldgroup > * + * {
  margin-left: -1px;
}

/* make sure all outside borders are visible for hovered/focused field */
.bf-fieldgroup > :is(:focus, :focus-within, :hover):not(.bf-fieldgroup-item) {
  position: relative;
  z-index: 1;
}

/* Checkbox support for FieldGroup (button variant only) */
.bf-fieldgroup .bf-checkbox {
  border: 1px solid var(--bfc-base-c-wcag);
  border-radius: 0;
}

.bf-fieldgroup .bf-checkbox:hover {
  border: 1px solid var(--bfc-base-c-inverted);
}

/* DatePicker support */
.bf-fieldgroup .bf-datepicker-container .react-datepicker__input-container input {
  border-radius: 0;
}

/* First child border radius */
.bf-fieldgroup > :first-child,
.bf-fieldgroup > :first-child :is(.bf-input,
.bf-select__control,
.react-datepicker__input-container input) {
  border-top-left-radius: var(--bf-radius-s);
  border-bottom-left-radius: var(--bf-radius-s);
}

/* Last child border radius */
.bf-fieldgroup > :last-child,
.bf-fieldgroup > :last-child :is(.bf-input,
.bf-select__control,
.react-datepicker__input-container input) {
  border-top-right-radius: var(--bf-radius-s);
  border-bottom-right-radius: var(--bf-radius-s);
}

/* Alert state */
.bf-fieldgroup-alert :is(.bf-select__control,
.bf-input,
.react-datepicker__input-container input):not(.bf-select__control--is-focused, :focus) {
  border-color: var(--bfc-base-c-alert);
}

.bf-fieldgroup-alert :is(.bf-select__control,
.bf-input,
.react-datepicker__input-container input):not(.bf-select__control--is-focused, :focus):hover {
  border-color: var(--bfc-alert-fade-c);
}

/* Read-only */
.bf-fieldgroup-readonly .bf-fieldgroup-item > div {
  border-color: var(--bfc-base-c-dimmed);
}

.bf-accordion {
  border: 1px solid var(--bfc-base-c-dimmed);
  border-radius: var(--bf-accordion-radius);
  background: var(--bfc-base-3);
}

.bf-accordion:where(:not(.bf-accordion-compact)) {
  --bf-accordion-radius: var(--bf-radius, 12px);
}

.bf-accordion-noborder {
  /* todo: remove in 6.0 */
  --bf-accordion-radius: 0px;
  border: none;
}

.bf-accordion-item {
  color: var(--bfc-base-c);
}

.bf-accordion-item + .bf-accordion-item {
  border-top: 1px solid var(--bfc-base-c-dimmed);
}

.bf-accordion-item-title {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
  font-size: var(--bf-font-size-m);
}

.bf-accordion-item-title > button {
  padding-block: var(--rem8);
  padding-right: 16px;
  padding-left: 10px;
  min-height: 2.875rem; /* 46px */
  cursor: pointer;
  background: transparent;
  border: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.bf-accordion-item-title > button:focus {
  outline: none;
}

.bf-accordion-item:last-child .bf-accordion-item-title,
.bf-accordion-item:last-child .bf-accordion-item-content {
  border-bottom: 0;
}

.bf-accordion-item:where(:last-child) .bf-accordion-item-content {
  border-bottom-left-radius: var(--bf-accordion-radius);
  border-bottom-right-radius: var(--bf-accordion-radius);
}

.bf-accordion-item-title .bf-accordion-item-angle {
  transition: all var(--bf-animation-duration);
}

.bf-accordion-item-angle-circle {
  width: 1.313rem; /* 21px */
  height: 1.313rem; /* 21px */
  display: inline-flex;
  place-items: center center;
  place-content: center center;
  margin-right: var(--bfs12);
  border-radius: var(--bf-radius-full);
}

.bf-accordion-item-title > button:hover .bf-accordion-item-angle-circle {
  background-color: var(--bfc-base);
}

.bf-accordion-item-active > .bf-accordion-item-title .bf-accordion-item-angle {
  transform: rotate(90deg);
}

.bf-accordion-item-content {
  padding: var(--bfs16);
  background-color: var(--bfc-base-2);
  /* stylelint-disable-next-line property-no-deprecated */
  word-wrap: break-word;
  font-size: var(--bf-font-size-m);
  position: relative;
}

.bf-accordion-item-content.bfl-nopadding {
  padding: 0;
}

.bf-accordion-item-title > button:focus-visible,
.bf-accordion-action:focus-visible {
  outline: 2px dotted var(--bfc-base-c);
  /* make sure the outline is visible on top of expanded accordion item content */
  position: relative;
  z-index: 1;
}

/* Disabled */
.bf-accordion-item-disabled,
.bf-accordion-item-disabled .bf-accordion-item-title svg {
  pointer-events: none;
  color: var(--bfc-base-c-disabled);
}

.bf-accordion-item-icon {
  margin-right: var(--bfs8);
  color: var(--bfc-base-c-2);
}

.bf-accordion-item-actions {
  margin-right: var(--bfs4);
}

/* #region styled variant */
.bf-accordion-styled {
  border: none;
  background-color: transparent;
}

.bf-accordion-styled .bf-accordion-item {
  border: 1px solid var(--bfc-base-c-dimmed);
  border-radius: var(--bf-accordion-radius);
  background-color: var(--bfc-base-3);
}

.bf-accordion-styled .bf-accordion-item-content {
  border-top: var(--bf-border);
  border-bottom-left-radius: var(--bf-accordion-radius);
  border-bottom-right-radius: var(--bf-accordion-radius);
}

.bf-accordion-styled.bf-accordion-noborder .bf-accordion-item {
  border: none;
}

.bf-accordion-styled .bf-accordion-item + .bf-accordion-item {
  margin-top: var(--bfs12);
}

.bf-accordion-styled .bf-accordion-item-title > button {
  min-height: calc(3.3125rem - 1px); /* 53px - 1px border-top from content */
}

.bf-accordion-styled .bf-accordion-item:has(.bf-accordion-item-title > button:hover) {
  box-shadow: var(--bf-shadow);
}

/* #endregion */
/* #region responsive / compact */
.bf-accordion-compact {
  border-left: none;
  border-right: none;
}

.bf-accordion-compact.bf-accordion-styled .bf-accordion-item {
  border: none;
}

@media (max-width: 599.9px) {
  .bf-accordion-responsive {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .bf-accordion-responsive.bf-accordion-styled .bf-accordion-item {
    border: none;
    border-radius: 0;
  }
}
/* #endregion */
/* #region Accordion.Action */
.bf-accordion-action {
  display: inline-flex;
  font: inherit;
  text-decoration-line: inherit;
  text-decoration-style: inherit;
  background: inherit;
  border: inherit;
  border-radius: inherit;
  cursor: pointer;
  padding: var(--bfs8);
  color: var(--bfc-base-c);
}

.bf-accordion-action-circle {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: var(--bf-radius-full);
  padding: 5px;
}

.bf-accordion-action:hover .bf-accordion-action-circle {
  background-color: var(--bfc-base-dimmed-2);
}

.bf-accordion-styled .bf-accordion-action {
  padding-block: 13px;
}

/* #endregion */
.bf-close-button {
  position: absolute;
  top: var(--bf-page-padding);
  font-size: var(--bf-font-size-h2);
  color: var(--bfc-base-c);
  cursor: pointer;
  border: none;
  border-radius: var(--bf-radius-full);
  width: var(--rem40);
  height: var(--rem40);
  text-overflow: unset;
  white-space: unset;
  background: inherit;
  line-height: 1;
  padding: 0; /* since iOS Safari behaves differently than all other browsers */
  /* fallback for browsers that don't understand env() */
  right: var(--bf-page-padding, 0);
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  right: calc(var(--bf-page-padding, 0px) + env(safe-area-inset-right));
}

.bf-close-button:hover,
.bf-close-button:focus-visible:hover {
  background: var(--bfc-base-dimmed-2);
}

.bf-close-button:focus-visible {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
}

.bf-close-button:active:hover {
  will-change: scale;
  scale: 0.95;
}

:root {
  --bf-drawer-width: 550px;
}

/* Drawer */
.bf-drawer {
  position: fixed;
  top: var(--bf-nav-top-height, 0);
  right: 0;
  bottom: 0;
  z-index: 99999;
  outline: none;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--bf-page-padding, 0);
  width: var(--bf-drawer-width);
  background: var(--bfc-base-3);
  margin-right: calc(var(--bf-drawer-width) * -1);
  transition-duration: var(--bf-animation-duration);
  transition-timing-function: var(--bf-timing-function);
  transition-property: width, margin, top;
}

.bf-drawer.bf-drawer-nopadding {
  padding: 0;
}

.bf-drawer:where(:not(.bf-drawer-with-footer, .bf-drawer-nopadding)) {
  padding-left: calc(var(--bf-page-padding, 0px) + env(safe-area-inset-left));
  padding-right: calc(var(--bf-page-padding, 0px) + env(safe-area-inset-right));
}

.bf-drawer.bf-drawer-open {
  margin-right: 0;
  box-shadow: 0 0 40px 0 var(--bfc-shadow);
}

/* #region Bottom position */
.bf-drawer-bottom {
  width: unset;
  top: unset;
  margin-right: 0;
  margin-bottom: -100lvh;
  left: var(--bf-nav-side-width, 0);
  border-radius: var(--bf-radius-l) var(--bf-radius-l) 0 0;
  /* todo: remove `vh` fallback when `dvh` is better supported */
  max-height: calc(100vh - var(--bf-nav-top-height));
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  max-height: calc(100dvh - var(--bf-nav-top-height));
}

.bf-drawer-bottom.bf-drawer-open {
  margin-bottom: 0;
}

.bf-drawer-bottom .bf-drawer-header {
  padding-right: 0;
}

/* #endregion */
/* Header */
.bf-drawer-header {
  font-size: var(--bf-font-size-h2);
  font-weight: 660;
}

.bf-drawer-with-close .bf-drawer-header {
  /* make space for close button */
  padding-right: 40px;
}

/* Footer */
.bf-drawer-with-footer {
  display: grid;
  overflow: visible;
  padding: 0;
}

.bf-drawer-with-footer > :not(.bf-drawer-content-not-visible) {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: calc(var(--bf-page-padding, 0px) / 2);
  /* todo: remove `vh` fallback when `dvh` is better supported */
  height: calc(100vh - var(--bf-nav-top-height, 0px));
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  height: calc(100dvh - var(--bf-nav-top-height, 0px));
}

.bf-drawer-with-footer.bf-drawer-nopadding > :not(.bf-drawer-content-not-visible) {
  gap: 0;
}

.bf-drawer-with-footer:not(.bf-drawer-nopadding) :where(.bf-drawer-footer, .bf-drawer-content) {
  padding-left: calc(var(--bf-page-padding, 0px) + env(safe-area-inset-left));
  padding-right: calc(var(--bf-page-padding, 0px) + env(safe-area-inset-right));
}

.bf-drawer-with-footer .bf-drawer-content {
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  padding-top: var(--bf-page-padding, 0);
}

.bf-drawer-with-footer:not(.bf-drawer-nopadding) .bf-drawer-footer {
  padding-bottom: var(--bf-page-padding, 0);
}

.bf-drawer-with-footer.bf-drawer-nopadding .bf-drawer-content {
  padding-top: 0;
}

/* Overlay */
.bf-drawer-overlay {
  position: fixed;
  inset: var(--bf-nav-top-height) 0 0 0;
  background-color: var(--bfc-overlay);
  transition-duration: var(--bf-animation-duration);
  transition-timing-function: var(--bf-timing-function);
  transition-property: opacity, visibility, top;
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
}

.bf-drawer-overlay-open {
  opacity: 1;
  visibility: visible;
}

/* Small */
@media (max-width: 599.9px), (max-height: 599.9px) {
  :root {
    --bf-drawer-width: 100dvw;
  }
}
/* Large */
@media (min-width: 1280px) {
  .bf-drawer-padding {
    padding-right: calc(var(--bf-drawer-width) + 24px);
  }
}
html.bf-drawer-overlay-active {
  overflow-y: hidden;
}

:where(.bf-dropdown[popover], .bf-dropdown-unstyled[popover]) {
  inset: unset;
  margin: unset;
  border: unset;
  overflow: unset;
  padding: unset;
  background: unset;
}

.bf-dropdown {
  background: var(--bfc-base-3);
  color: var(--bfc-base-c);
  border: 1px solid var(--bfc-base-dimmed);
  border-radius: var(--bf-radius-s);
  min-width: 200px;
  box-shadow: var(--bf-shadow);
  font-size: var(--bf-font-size-m);
  /* explicitly set properties to avoid inheriting from parent */
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  /* double rule in case browser doesn't understand `env()` */
  max-width: calc(100dvw - 20px);
  max-width: calc(100dvw - 20px - env(safe-area-inset-right) - env(safe-area-inset-left));
}

.bf-dropdown-content {
  overflow: auto;
  padding: 8px;
  /* todo: remove `vh` fallback when `dvh` is better supported */
  max-height: calc(100vh - var(--bf-nav-top-height) - 20px);
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  max-height: calc(100dvh - var(--bf-nav-top-height) - 20px);
}

/* dropdowns inside a hidden top nav */
.bf-nav-top-hide-for-mobile:not(:focus-within) .bf-dropdown-content {
  /* todo: remove `vh` fallback when `dvh` is better supported */
  max-height: calc(100vh - 20px);
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  max-height: calc(100dvh - 20px);
}

.bf-dropdown-nopadding,
.bf-dropdown-nopadding .bf-dropdown-content {
  padding: 0;
}

/* Dropdown with Checkbox */
.bf-dropdown .bf-checkbox {
  display: block;
  margin-block: var(--bfs8);
  margin-left: var(--bfs16);
  margin-right: var(--bfs8);
}

.bf-dropdown-content > :where(hr, div > hr) {
  padding: 0;
  margin: 8px -8px;
  border: var(--bf-border);
  border-bottom: none;
}

.bf-dropdown-nopadding .bf-dropdown-content > :where(hr, div > hr) {
  margin-inline: 0;
}

/* #region Dropdown.Item */
:is(a, button):has(> .bf-dropdown-item) {
  display: block;
  color: inherit;
  outline: none;
}

:where(a):has(> .bf-dropdown-item) {
  text-decoration-line: none;
}

:where(button):has(> .bf-dropdown-item) {
  width: 100%;
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  text-align: left;
  appearance: none;
  margin: 0;
}

.bf-dropdown-item {
  padding: 9.5px 12px;
  background-color: var(--bfc-base-3);
  color: var(--bfc-base-c);
  border-radius: var(--bf-radius-s);
}

.bf-dropdown-item:where(:has(> .bf-dropdown-item-icon:first-child)) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.bf-dropdown-item-icon {
  color: var(--bfc-base-c-2);
}

:where(:is(a, button):hover) > .bf-dropdown-item {
  background-color: var(--bfc-base-2);
}

:where(:is(a, button):focus-visible) > .bf-dropdown-item {
  outline: 2px dotted var(--bfc-base-c);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

:where(:is(a, button):hover > .bf-dropdown-item) > .bf-dropdown-item-icon {
  color: var(--bfc-base-c-theme);
}

/* #endregion Dropdown.Item */
.bf-message {
  padding: var(--bfs16);
  border-radius: var(--bf-radius-s);
  font-size: var(--bf-font-size-m);
}

.bf-message-header {
  margin-bottom: var(--bfs8);
  font-weight: 600;
}

/* No margin-bottom when header only */
.bf-message-only-header .bf-message-header {
  margin-bottom: 0;
}

.bf-message-icon {
  margin-right: var(--bfs8);
}

.bf-message-statusbar {
  padding-top: var(--bfs8);
  padding-bottom: var(--bfs8);
  font-weight: 600;
  position: relative;
}

.bf-message-close {
  float: right;
  position: relative;
  background-color: transparent;
  color: inherit;
  border: 1px dashed transparent;
  border-radius: var(--bf-radius-full);
  text-align: center;
  cursor: pointer;
  padding: 0;
  height: 1.313rem; /* 21px */
  width: 1.313rem; /* 21px */
  line-height: 1.4;
}

.bf-message-close:focus {
  outline: none;
}

.bf-message-close:focus-visible {
  border-color: currentcolor;
}

/* remove firefox dotted line on focus */
.bf-message-close::-moz-focus-inner {
  border: 0;
}

/* expand and close buttons hover state background colors */
.bfc-theme-bg {
  --bf-message-hover-bg-hsl: var(--bfc-theme-c-hsl);
}

.bfc-theme-fade-bg {
  --bf-message-hover-bg-hsl: var(--bfc-theme-fade-c-hsl);
}

.bfc-neutral-bg {
  --bf-message-hover-bg-hsl: var(--bfc-neutral-c-hsl);
}

.bfc-neutral-fade-bg {
  --bf-message-hover-bg-hsl: var(--bfc-neutral-fade-c-hsl);
}

.bfc-brand-bg {
  --bf-message-hover-bg-hsl: var(--bfc-brand-c-hsl);
}

.bfc-brand-fade-bg {
  --bf-message-hover-bg-hsl: var(--bfc-brand-fade-c-hsl);
}

.bfc-chill-bg {
  --bf-message-hover-bg-hsl: var(--bfc-chill-c-hsl);
}

.bfc-chill-fade-bg {
  --bf-message-hover-bg-hsl: var(--bfc-chill-fade-c-hsl);
}

.bfc-attn-bg {
  --bf-message-hover-bg-hsl: var(--bfc-attn-c-hsl);
}

.bfc-attn-fade-bg {
  --bf-message-hover-bg-hsl: var(--bfc-attn-fade-c-hsl);
}

.bfc-success-bg {
  --bf-message-hover-bg-hsl: var(--bfc-success-c-hsl);
}

.bfc-success-fade-bg {
  --bf-message-hover-bg-hsl: var(--bfc-success-fade-c-hsl);
}

.bfc-warning-bg {
  --bf-message-hover-bg-hsl: var(--bfc-warning-c-hsl);
}

.bfc-warning-fade-bg {
  --bf-message-hover-bg-hsl: var(--bfc-warning-fade-c-hsl);
}

.bfc-alert-bg {
  --bf-message-hover-bg-hsl: var(--bfc-alert-c-hsl);
}

.bfc-alert-fade-bg {
  --bf-message-hover-bg-hsl: var(--bfc-alert-fade-c-hsl);
}

.bf-message-close:hover {
  background-color: hsla(var(--bf-message-hover-bg-hsl), 0.1);
}

.bf-message-expandable-content {
  background-color: var(--bfc-base-3);
  font-size: var(--bf-font-size-m);
  padding: var(--bfs16);
  color: var(--bfc-base-c-1);
  border-bottom-left-radius: var(--bf-radius-s);
  border-bottom-right-radius: var(--bf-radius-s);
}

.bf-message-expandable-content.bf-nopadding {
  padding: 0;
}

.bf-message-expandable-icon {
  display: inline-block;
  margin-right: var(--bfs8);
  border-radius: var(--bf-radius-full);
  height: 1.313rem; /* 21px */
  width: 1.313rem; /* 21px */
  text-align: center;
  transition: all var(--bf-animation-duration) var(--bf-timing-function);
}

.bf-message-expandable-active .bf-message-expandable-icon {
  transform: rotate(90deg);
}

.bf-message-expandable {
  border: 1px solid var(--bfc-base-dimmed);
  /* add an extra px to match inner header radius  */
  border-radius: calc(var(--bf-radius-s) + 1px);
  padding: 0;
}

.bf-message-expandable .bf-message-header {
  border-radius: var(--bf-radius-s);
  cursor: pointer;
  outline: none;
  margin: 0;
  padding: 17px var(--bfs12);
}

.bf-message-expandable.bf-message-expandable-active .bf-message-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bf-message-expandable:has(.bf-message-header:hover) {
  box-shadow: var(--bf-shadow);
}

.bf-message-expandable .bf-message-header:hover .bf-message-expandable-icon {
  background-color: hsla(var(--bf-message-hover-bg-hsl), 0.1);
}

.bf-message-expandable .bf-message-header:focus-visible {
  outline: 1px dashed;
}

/* Remove margin from first and last elements inside message */
.bf-message .bf-message-header + * {
  margin-top: 0;
}

.bf-message > :last-child:not(.bf-message-header) {
  margin-bottom: 0;
}

.bf-modal {
  --bf-modal-padding: var(--bfs40);
  --bf-modal-width: 100%;
  padding: unset;
  border: unset;
  background: unset;
  margin: auto;
  max-width: min(100% - var(--bf-modal-padding) * 2, var(--bf-modal-width));
  overscroll-behavior: contain;
  font-size: var(--bf-font-size-m);
}

/* the dialog itself is usually not focusable, except if you press ESC
on an unclosable dialog (and don't have focus elsewhere)? */
.bf-modal:focus-visible {
  outline: none;
}

.bf-modal-content {
  /* avoid padding on modal element directly to reliably
  detect if a click is on content or outside (on backdrop) */
  padding: var(--bf-modal-padding);
  background: var(--bfc-base);
  color: var(--bfc-base-c);
  border-radius: var(--bf-radius);
}

.bf-modal-transparent {
  background: transparent;
}

.