@abw/badger-react-ui/dist/styles/badger-react-ui.css

React UI Components

/* config/all.scss */
/* config/namespaces.scss */
/* config/units.scss */
:where(html) {
  --unit-size: 1em;
  --unit-line: 1.5;
  --unit-space: 0.25;
  --unit-margin: 0.25rem;
  --unit-padding: 0.25em;
  --unit-padding-v: 0.25em;
  --unit-padding-h: 0.5em;
  --unit-radius: 0.25rem;
  --unit-transition: 0.3s;
}

:where(.alert) {
  --dismiss-color: var(--color-90);
  --dismiss-hover: var(--color-100);
  --transition-time: var(--unit-transition);
  --icon-margin: 0.5em;
  --icon-size: 2em;
  --icon-padding: 0.125em;
  --icon-gap: 1.5em;
  --icon-align: flex-start;
  --icon-color: var(--color-100);
  --icon-background: var(--color-50);
  --icon-border-color: var(--color-80);
  --icon-border-width: 0.125em;
  --icon-ring-color: var(--color-70);
  --icon-ring-width: 0.125em;
}

.alert h3 {
  font-size: 1.25em;
}
.alert .headline .on-left {
  margin-right: var(--icon-margin);
  margin-left: calc(var(--icon-margin) + -1 * var(--padding-h));
}
.alert .headline .on-right {
  margin-left: var(--icon-margin);
  margin-right: calc(var(--icon-margin) + -1 * var(--padding-h));
}
.alert.dismissable .icon.dismiss {
  color: var(--dismiss-color);
  transition: var(--transition-time) color;
}
.alert.dismissable .icon.dismiss:hover {
  color: var(--dismiss-hover);
}
.alert.revealable .headline:hover {
  --headline-back: var(--color-45);
  transition: var(--transition-time) background-color;
  cursor: pointer;
}
.alert.revealable:not(.revealed) {
  padding-bottom: 0;
}
.alert.revealable:not(.revealed) .headline {
  margin-bottom: 0;
}
.alert .side-icon {
  display: flex;
  align-items: var(--icon-align);
  gap: var(--icon-gap);
}
.alert .side-icon > .icon {
  color: var(--icon-color);
  background-color: var(--icon-background);
  font-size: var(--icon-size);
  margin: 0.25em;
  padding: var(--icon-padding);
  border: var(--icon-border-width) solid var(--icon-border-color);
  box-shadow: 0 0 0 var(--icon-ring-width) var(--icon-ring-color);
  border-radius: 50%;
}
.alert.compact {
  --icon-size: 1em;
  --icon-gap: 0.5em;
  --icon-align: center;
}

[data-theme=dark] .alert {
  --icon-color: var(--color-80);
  --icon-background: var(--color-40);
  --icon-ring-color: var(--color-30);
  --icon-border-color: var(--color-20);
}

section.datatable {
  --header-icon-color: var(--brand-30);
  --header-icon-opacity: 0.2;
  --header-icon-hover-opacity: 0.5;
  --header-size: 0.875em;
  --filters-shade: var(--color-95);
  --filtering-color: var(--brand-70);
  --filtering-hover: var(--brand-80);
  --has-filters-color: var(--red-60);
  --has-filters-hover: var(--red-50);
  --no-rows-color: var(--red-20);
  --no-rows-background: var(--red-90);
  --sorting-shade-1: var(--color-95);
  --sorting-shade-2: var(--color-90);
  --sorting-shade-3: var(--color-80);
  --sorting-shade-4: var(--color-75);
  --filtering-mix: 5%;
  --filtering-stripe: var(--color-50);
  --filtering-gradient-width: 16px;
  --filtering-gradient-angle: 30deg;
  --filtering-gradient-angle1: calc(90deg + var(--filtering-gradient-angle));
  --filtering-gradient-angle2: calc(90deg - var(--filtering-gradient-angle));
}
section.datatable > header {
  margin-bottom: 0.5rem;
}
section.datatable > header .controls .trigger:hover {
  cursor: pointer;
}
section.datatable > header .controls .trigger:hover path, section.datatable > header .controls .trigger:hover rect {
  fill: var(--filtering-hover);
}
section.datatable > header .controls .filtering.trigger path {
  fill: var(--filtering-color);
}
section.datatable > header .controls .has-filters.trigger path {
  fill: var(--has-filters-color);
}
section.datatable > header .controls .has-filters.trigger:hover path, section.datatable > header .controls .has-filters.trigger:hover rect {
  fill: var(--has-filters-hover);
}
section.datatable > footer {
  margin-top: 0.5rem;
}
section.datatable table {
  overflow: visible;
}
section.datatable table thead {
  font-size: var(--header-size);
}
section.datatable table th.heading {
  --header-stripe: var(--background-color);
  --header-gradient: repeating-linear-gradient(
    var(--filtering-gradient-angle1),
  var(--background-color),
  var(--background-color) var(--filtering-gradient-width),
    var(--header-stripe) var(--filtering-gradient-width),
    var(--header-stripe) calc(var(--filtering-gradient-width) * 2)
  );
  background-color: var(--background-color);
  background-image: var(--header-gradient);
}
section.datatable table th.heading.sortable {
  cursor: pointer;
}
section.datatable table th.heading .sort-icon, section.datatable table th.heading .filter-icon {
  opacity: var(--header-icon-opacity);
  transition: 0.3s opacity;
  color: var(--header-icon-color);
}
section.datatable table th.heading.sortable:hover {
  --background-color: var(--sorting-shade-4);
}
section.datatable table th.heading.sortable:hover .sort-icon {
  opacity: var(--header-icon-hover-opacity);
}
section.datatable table th.heading.sorting {
  --background-color: var(--sorting-shade-3);
}
section.datatable table th.heading.sorting .sort-icon {
  opacity: 1;
}
section.datatable table th.heading.filtering {
  --header-stripe: color-mix(
    in srgb,
  var(--background-color),
    var(--filtering-stripe) var(--filtering-mix)
  ) ;
}
section.datatable table th.heading.text-right .flex {
  flex-direction: row-reverse;
}
section.datatable table th.heading.text-center .flex {
  padding-left: 1em;
}
section.datatable table thead tr.filters th {
  padding: 0px 4px 0px 0px;
  font-weight: normal;
  background-color: var(--filters-shade);
}
section.datatable table thead tr.filters th input, section.datatable table thead tr.filters th select, section.datatable table thead tr.filters th label, section.datatable table thead tr.filters th .inputs {
  border-color: transparent;
}
section.datatable table thead tr.filters th svg.icon {
  color: var(--header-icon-color);
  opacity: var(--header-icon-opacity);
}
section.datatable table thead tr.filters th.filtering svg.icon {
  opacity: var(--header-icon-hover-opacity);
}
section.datatable table thead tr.filters th.filtering svg.icon:hover {
  opacity: 1;
}
section.datatable table tbody tr td {
  --cell-stripe: var(--background-color);
  --cell-gradient: repeating-linear-gradient(
    var(--filtering-gradient-angle1),
  var(--background-color),
  var(--background-color) var(--filtering-gradient-width),
    var(--cell-stripe) var(--filtering-gradient-width),
    var(--cell-stripe) calc(var(--filtering-gradient-width) * 2)
  );
  background-color: var(--background-color);
  background-image: var(--cell-gradient);
}
section.datatable table tr:nth-child(odd) td,
section.datatable table tr:nth-child(even) th {
  --filtering-gradient-angle1: var(--filtering-gradient-angle2);
}
section.datatable table tbody tr.no-rows td {
  text-align: center;
  --color: var(--no-rows-color);
  --background-color: var(--no-rows-background);
}
section.datatable table tbody tr td.sorting {
  font-weight: 500;
  --background-color: var(--sorting-shade-1);
}
section.datatable table tbody tr td.filtering {
  --cell-stripe: color-mix(
    in srgb,
    var(--background-color),
    var(--filtering-stripe) var(--filtering-mix)
  ) ;
}
section.datatable table.striped tbody tr:nth-child(even) td.sorting {
  --background-color: var(--sorting-shade-2);
}
section.datatable table.selectable tbody tr:hover:not(.unselectable) td, section.datatable table.selectable tbody tr:hover:not(.unselectable) th {
  --background-color: var(--selectable-background);
}
section.datatable table.selectable tbody tr:hover:not(.unselectable) td > *:not(dialog), section.datatable table.selectable tbody tr:hover:not(.unselectable) th > *:not(dialog) {
  background-color: transparent;
  color: var(--selectable-color);
  transition: background-color 0.3s ease;
}
section.datatable table.selectable tbody tr:hover:not(.unselectable) td > .badge, section.datatable table.selectable tbody tr:hover:not(.unselectable) td > button, section.datatable table.selectable tbody tr:hover:not(.unselectable) td > .button, section.datatable table.selectable tbody tr:hover:not(.unselectable) td > .inverse, section.datatable table.selectable tbody tr:hover:not(.unselectable) th > .badge, section.datatable table.selectable tbody tr:hover:not(.unselectable) th > button, section.datatable table.selectable tbody tr:hover:not(.unselectable) th > .button, section.datatable table.selectable tbody tr:hover:not(.unselectable) th > .inverse {
  border-color: color-mix(in srgb, var(--selectable-color), transparent 30%);
  background-color: color-mix(in srgb, var(--selectable-color), transparent 80%);
}
section.datatable .columns.menu .icons {
  display: inline-grid;
}
section.datatable .columns.menu .item:hover label {
  color: var(--active-color);
  transition: color 0.1s;
}

[data-theme=dark] section.datatable {
  --header-icon-color: var(--brand-70);
  --sorting-shade-1: var(--color-10);
  --sorting-shade-2: var(--color-15);
  --sorting-shade-3: var(--color-20);
  --sorting-shade-4: var(--color-25);
  --filters-shade: var(--color-15);
  --has-filters-color: var(--red-40);
  --no-rows-color: var(--red-80);
  --no-rows-background: var(--red-15);
  --filtering-mix: 11%;
}

:where(.details) {
  --icon-transition: 0.3s;
}

.details .summary {
  display: flex;
  gap: 0.25em;
  align-items: center;
  padding-right: var(--body-padding);
}
.details .summary .icon {
  transition: all var(--icon-transition);
}
.details.open > .summary .icon {
  transform: rotate(var(--icon-rotate, 0));
}

.details.wide-summary .summary .summary-text {
  flex-grow: 1;
}

:where(.dropdown) {
  --menu-margin: 0.5em;
  --max-height: 50vh;
  --trigger-padding: var(--input-padding-v) var(--input-padding-h);
  --trigger-line-height: var(--input-line-height);
  --trigger-border-radius: var(--input-border-radius);
  --trigger-border-width: var(--input-border-width);
  --focus-ring-outline: 0 0 0 var(--input-focus-ring-width) var(--input-focus-ring-color);
  --focus-ring-inline: 0 0 0 var(--input-focus-ring-gap) var(--input-focus-gap-color);
  --focus-ring: var(--focus-ring-inline), var(--focus-ring-outline);
  --icon-margin: 0.5em;
  --icon-transition: 0.3s;
  --body-background: var(--color-100);
  --body-padding: 0.5em 0.5em;
}

:where([data-theme=dark] .dropdown) {
  --body-background: var(--color-0);
}

.dropdown {
  --menu-z-index: 100;
  --safe-z-index: 99;
  position: relative;
  overflow: visible;
  display: inline-block;
}
.dropdown .trigger {
  position: relative;
  white-space: nowrap;
  cursor: pointer;
}
.dropdown .trigger:not(button):not(.button) {
  display: inline-block;
  padding: var(--trigger-padding);
  border-radius: var(--trigger-border-radius);
  font-size: 1em;
  line-height: var(--trigger-line-height);
  border: var(--trigger-border-width) solid transparent;
}
.dropdown .trigger:not(button):not(.button):focus:not(.no-focus) {
  --color: var(--input-focus-color);
  --border-color: var(--input-focus-border-color);
  --background-color: var(--input-focus-background-color);
  outline: none;
  box-shadow: var(--focus-ring);
}
.dropdown .trigger.button.icon svg.icon {
  margin-left: 0;
  margin-right: 0;
}
.dropdown .trigger.button svg.icon.on-right {
  margin-left: var(--icon-margin);
  margin-right: var(--icon-pull);
}
.dropdown .trigger .icon {
  transition: all var(--icon-transition);
}
.dropdown.open .trigger .icon {
  transform: rotate(var(--icon-rotate, 0));
}
.dropdown.open .trigger .safe-area {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(var(--menu-margin) + 10px);
  z-index: var(--safe-z-index);
}
.dropdown .menu, .dropdown .body {
  width: max-content;
  left: 0;
  right: auto;
  z-index: var(--menu-z-index);
  overflow-y: scroll;
  max-height: var(--max-height);
  box-shadow: var(--shadow-2);
  background-color: var(--item-background);
}
.dropdown .body {
  background-color: var(--body-background);
  padding: var(--body-padding);
}
.dropdown .body .fluid {
  display: block;
  width: auto !important;
}
.dropdown.right .menu, .dropdown.right .body {
  right: 0;
  left: auto;
}
.dropdown.wide .menu, .dropdown.wide .body {
  width: 100%;
  left: 0;
  right: 0;
}

.multiselect {
  --selection-color: var(--grey-20);
  --selection-border: var(--grey-80);
  --selection-background: var(--grey-95);
  --selection-radius: 0.25rem;
  --selection-padding: 0.25em 0.5em;
  --unselect-color: var(--red-20);
  --unselect-border: var(--red-80);
  --unselect-background: var(--red-95);
  --sortable-color: var(--orange-20);
  --sortable-icon: var(--orange-50);
  --sortable-border: var(--orange-80);
  --sortable-background: var(--orange-95);
  --sorting-color: var(--green-20);
  --sorting-icon: var(--green-50);
  --sorting-border: var(--green-80);
  --sorting-background: var(--green-95);
}
.multiselect .option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.multiselect .option > .icon, .multiselect .option > .no-icon {
  flex-basis: 1.5rem;
}
.multiselect .option > :first-child {
  flex-basis: 100%;
}
.multiselect .selections {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.multiselect .selections .selection {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--size-small);
  color: var(--selection-color);
  background-color: var(--selection-background);
  border: 1px solid var(--selection-border);
  border-radius: var(--selection-radius);
  padding: var(--selection-padding);
}
.multiselect .selections .selection:hover {
  cursor: pointer;
  color: var(--unselect-color);
  background-color: var(--unselect-background);
  border-color: var(--unselect-border);
}
.multiselect .selections .sortable.item .selection .drag-icon {
  padding-right: 0.5em;
}
.multiselect .selections .sortable.item .selection .drag-icon:hover {
  color: var(--sortable-icon);
}
.multiselect .selections .sortable.item .selection:has(.drag-icon:hover) {
  color: var(--sortable-color);
  background-color: var(--sortable-background);
  border-color: var(--sortable-border);
}
.multiselect .selections .sortable.item[aria-pressed=true] .selection,
.multiselect .selections .sortable.item[aria-pressed=true] .selection:has(.drag-icon:hover) {
  color: var(--sorting-color);
  background-color: var(--sorting-background);
  border-color: var(--sorting-border);
}
.multiselect .selections .sortable.item[aria-pressed=true] .selection .drag-icon:hover,
.multiselect .selections .sortable.item[aria-pressed=true] .selection:has(.drag-icon:hover) .drag-icon:hover {
  color: var(--sorting-icon);
}

[data-theme=dark] .multiselect {
  --selection-color: var(--grey-80);
  --selection-border: var(--grey-20);
  --selection-background: var(--grey-10);
  --unselect-color: var(--red-90);
  --unselect-border: var(--red-25);
  --unselect-background: var(--red-10);
  --sortable-color: var(--orange-80);
  --sortable-border: var(--orange-20);
  --sortable-background: var(--orange-10);
  --sorting-color: var(--green-80);
  --sorting-border: var(--green-20);
  --sorting-background: var(--green-10);
}

.pager {
  user-select: none;
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
}
.pager .pages {
  display: flex;
  gap: 0.5em;
}

:where(.range) {
  --track-background: var(--color-85);
  --track-border: var(--color-70);
  --track-fill: var(--color-50);
  --track-dragging: var(--color-55);
  --thumb-color: var(--track-fill);
  --shadow-color: color-mix(in srgb, var(--thumb-color), black 20%);
  --shadow-focus-color: color-mix(in srgb, var(--thumb-color), transparent 70%);
  --step-color: var(--color-50);
  --step-background: var(--color-90);
  --step-hover-color: var(--color-30);
  --step-hover-background: var(--color-80);
  --step-disabled-color: var(--grey-70);
  --step-disabled-background: var(--grey-95);
  --tick-color: var(--track-border);
  --value-color: var(--grey-20);
  --scale-color: var(--grey-40);
}

:where([data-theme=dark] .range) {
  --track-background: var(--color-15);
  --track-border: var(--color-35);
  --track-fill: var(--color-50);
  --shadow-color: color-mix(in srgb, var(--thumb-color), white 20%);
  --shadow-focus-color: color-mix(in srgb, var(--thumb-color), transparent 55%);
  --step-color: var(--color-60);
  --step-background: var(--color-15);
  --step-hover-color: var(--color-70);
  --step-hover-background: var(--color-25);
  --step-disabled-color: var(--grey-30);
  --step-disabled-background: var(--grey-5);
  --value-color: var(--grey-80);
}

.range {
  --position: 0.5;
  --min-position: 0.25;
  --max-position: 0.75;
  --min-percent: 0;
  --max-percent: 100%;
  --track-border-width: 1px;
  --track-height: calc(0.5em + var(--track-border-width) * 2);
  --track-half: calc(var(--track-height) / 2);
  --selection-border-offset: 0px;
  --thumb-size: calc(1em + var(--track-border-width) * 2);
  --thumb-size: 1.25em;
  --thumb-half: calc(var(--thumb-size) / 2);
  --thumb-opacity: 1;
  --track-offset: var(--track-border-width);
  --thumbs-offset: calc(var(--thumb-half) - var(--track-border-width));
  --shadow-size: 0px;
  --shadow-focus-size: 6px;
  --z-index: 100;
  --percent: 50%;
  --steps: 1;
  --ticks-offset: calc(var(--thumbs-offset) + var(--track-border-width));
  --tick-length: 4px;
  --tick-width: 1px;
  --tick-radius: 1px;
  --tick-offset: calc(0px - var(--tick-length));
  --transition-time: var(--unit-transition);
  --selection-background: var(--track-fill);
  --inputs-gap: 1rem;
  --gap: 0.75rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--gap);
  touch-action: none;
  user-select: none;
  padding: 0.25em 0;
}
.range:has(.range-values.smaller, .range-values.smallest) {
  padding-top: 0em;
}
.range:has(.range-values.large) {
  padding-top: 0.5em;
}
.range:has(.range-values.larger) {
  padding-top: 0.75em;
}
.range:has(.range-values.largest) {
  padding-top: 1em;
}
.range.range-dragging {
  --selection-background: var(--track-dragging);
  --thumb-color: var(--track-dragging);
}
.range.range-has-scale .range-slider {
  margin-bottom: 1em;
}
.range.range-has-scale .range-slider:has(.range-scale-value.small) {
  margin-bottom: 1.25em;
}
.range.range-has-scale .range-slider:has(.range-scale-value.medium) {
  margin-bottom: 1.5em;
}
.range.range-has-scale .range-slider:has(.range-scale-value.large) {
  margin-bottom: 1.75em;
}
.range.range-has-scale .range-slider:has(.range-scale-value.larger) {
  margin-bottom: 2em;
}
.range.range-has-scale .range-slider:has(.range-scale-value.largest) {
  margin-bottom: 2.5em;
}
.range .range-slider {
  width: 100%;
  height: 1em;
  position: relative;
}
.range .range-track {
  cursor: pointer;
  position: absolute;
  left: var(--track-offset);
  right: var(--track-offset);
  top: 50%;
  transform: translateY(-50%);
  height: var(--track-height);
  border-radius: var(--track-half);
  border: var(--track-border-width) solid var(--track-border);
  background-color: var(--track-background);
  overflow: visible;
}
.range .range-track .range-selection {
  position: absolute;
  top: var(--selection-border-offset);
  bottom: var(--selection-border-offset);
  left: calc(var(--selection-border-offset) + var(--min-percent));
  right: calc(100% - var(--max-percent));
  border-radius: var(--track-half);
  border-color: var(--selection-background);
  background-color: var(--selection-background);
  transition: background-color var(--transition-time);
}
.range .range-track .range-thumbs {
  position: absolute;
  left: var(--thumbs-offset);
  right: var(--thumbs-offset);
  top: 0px;
  bottom: 0px;
}
.range .range-thumb {
  position: absolute;
  user-select: none;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: var(--thumb-half);
  box-shadow: 0 0 0 var(--shadow-size) var(--shadow-color);
  transition: box-shadow 300ms, opacity 300ms;
  background-color: var(--thumb-color);
  opacity: var(--thumb-opacity);
  transition: background-color var(--transition-time);
}
.range .range-thumb.min {
  left: var(--min-percent);
}
.range .range-thumb.max {
  left: var(--max-percent);
}
.range .range-thumb:hover, .range .range-thumb:focus, .range .range-thumb.dragging {
  outline: none;
  opacity: 1;
  --shadow-size: var(--shadow-focus-size);
  --shadow-color: var(--shadow-focus-color);
}
.range .range-limits {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  line-height: 1;
  margin-top: -0.5em;
  user-select: none;
}
.range .range-scale-value {
  color: var(--scale-color);
}
.range .range-ticks {
  position: absolute;
  top: var(--tick-offset);
  bottom: var(--tick-offset);
  left: var(--ticks-offset);
  right: var(--ticks-offset);
  display: flex;
  justify-content: space-between;
}
.range .range-ticks .range-tick {
  position: relative;
  height: 100%;
  width: var(--tick-width);
  background-color: var(--tick-color);
  border-radius: var(--tick-radius);
  --transform-scale: 0;
}
.range .range-ticks .range-tick:not(:first-child) {
  --transform-scale: -50%;
}
.range .range-ticks .range-tick:first-child {
  --transform-scale: -0.5ch;
}
.range .range-ticks .range-tick:last-child {
  --transform-scale: calc(-100% + 0.5ch);
}
.range .range-ticks .range-tick .range-scale-value {
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateX(var(--transform-scale));
}
.range .range-inputs {
  display: flex;
  justify-content: space-between;
  gap: var(--inputs-gap);
}
.range .range-inputs.center, .range .range-inputs.centre {
  justify-content: center;
}
.range .range-inputs.space {
  justify-content: space-between;
}
.range .range-inputs.left {
  justify-content: flex-start;
}
.range .range-inputs.right {
  justify-content: flex-end;
}
.range .range-input {
  width: auto;
  text-align: center;
}
.range .range-input input, .range .range-input .select {
  text-align: left;
}
.range .range-input .step {
  color: var(--step-color);
  background-color: var(--step-background);
}
.range .range-input .step.disabled {
  color: var(--step-disabled-color);
  background-color: var(--step-disabled-background);
}
.range .range-input .step:hover:not(.disabled) {
  color: var(--step-hover-color);
  background-color: var(--step-hover-background);
  cursor: pointer;
}
.range .range-input input::-webkit-outer-spin-button,
.range .range-input input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}
.range .range-input input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.range .range-output {
  width: 100%;
  min-height: 1em;
  line-height: 1;
  position: relative;
}
.range .range-output .range-value {
  position: absolute;
  line-height: 1;
  color: var(--value-color);
  bottom: 0;
}
.range .range-output .range-value.thumb {
  left: var(--percent);
  transform: translateX(calc(0% - var(--percent)));
}
.range .range-output .range-value.thumb.min {
  --percent: var(--min-percent);
}
.range .range-output .range-value.thumb.max {
  --percent: var(--max-percent);
}
.range .range-output .range-value.center {
  left: 50%;
  transform: translateX(-50%);
}

:where(.search .menu) {
  --menu-margin: 0.5em;
  --max-height: 50vh;
}

.search {
  position: relative;
  overflow: visible;
}
.search .inputs.round {
  --border-radius: 1em;
}
.search .inputs.round .prefix {
  margin-left: 0.25em;
}
.search .inputs.round .suffix {
  margin-right: 0.25em;
}
.search .menu {
  position: absolute;
  display: block;
  top: calc(100% + var(--menu-margin));
  left: 0;
  right: 0;
  overflow-y: scroll;
  max-height: var(--max-height);
  box-shadow: var(--shadow-2);
}
.search .menu .error.item {
  background-color: var(--red-50);
  color: var(--red-100);
}

:where(.select) {
  --menu-margin: 0.5em;
  --max-height: 50vh;
  --search-margin: 0.5em;
  --search-heading-weight: 500;
  --search-heading-size: var(--size-small);
  --search-heading-color: var(--brand-0);
  --search-heading-background: var(--brand-90);
  --search-clear-color: var(--brand-10);
  --search-clear-background: var(--brand-75);
}

:where([data-theme=dark] .select) {
  --search-clear-color: var(--brand-70);
  --search-clear-background: var(--brand-25);
}

.select {
  position: relative;
  overflow: visible;
}
.select .search {
  position: absolute;
  display: block;
  top: calc(100% + var(--menu-margin) - var(--input-border-width));
  width: 100%;
  z-index: var(--menu-z-index, 100);
  box-shadow: var(--shadow-2);
}
.select .search .suffix.clear:hover {
  color: var(--search-clear-color);
  background-color: var(--search-clear-background);
}
.select .menu {
  --top: calc(100% + var(--menu-margin) - var(--input-border-width));
  position: absolute;
  display: block;
  top: var(--top);
  left: 0;
  right: 0;
  overflow-y: scroll;
  z-index: var(--menu-z-index, 100);
  max-height: var(--max-height);
  box-shadow: var(--shadow-2);
  background-color: var(--background-color);
}
.select.open .search .inputs {
  border-bottom: 1px solid var(--border-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-style: solid;
  outline: none;
}
.select.open .search .inputs .prefix, .select.open .search .inputs .suffix {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.select.open .inputs {
  box-shadow: var(--focus-ring);
}
.select.open .search:has(:focus) .inputs {
  box-shadow: none;
}
.select.open .search .inputs {
  box-shadow: none;
}
.select.open:has(.search) .menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.select.open:has(.search) .menu .item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.select:has(.search) .menu {
  border-top: 0;
  --top: calc(
      100% +
      1em * var(--input-line-height) +
      1 * var(--input-border-width) +
      2 * var(--input-padding-v) +
      1 * var(--menu-margin)
  );
}

.inputs .select .inputs {
  border: none;
  box-shadow: none;
}

/*
$sortable-list-bg-color:     rgba($blue, 0.1) !default;
$sortable-list-border-color: rgba($blue, 0.2) !default;
$sortable-radius:            $unit-radius !default;
// $sortable-radius:            10px !default;
$sortable-moved-color:       $orange !default;
$sortable-moved-fg-color:    darker-color($sortable-moved-color) !default;
$sortable-moved-bg-color:    mix($white, $sortable-moved-color, 95%) !default;
$sortable-moving-color:      $green !default;
$sortable-moving-fg-color:   darker-color($sortable-moving-color) !default;
$sortable-moving-bg-color:   mix($white, $sortable-moving-color, 95%) !default;
*/
:where(.sortable) {
  --sortable-moving-color: var(--green-20);
  --sortable-moving-background: var(--green-95);
  --sortable-moving-border: var(--green-80);
  --sortable-moved-color: var(--orange-20);
  --sortable-moved-background: var(--orange-95);
  --sortable-moved-border: var(--orange-80);
}

:where([data-theme=dark] .sortable) {
  --sortable-moving-color: var(--green-80);
  --sortable-moving-background: var(--green-5);
  --sortable-moving-border: var(--green-20);
  --sortable-moved-color: var(--orange-80);
  --sortable-moved-background: var(--orange-5);
  --sortable-moved-border: var(--orange-20);
}

.sortable.item,
.sortable .item {
  display: inline-block;
  cursor: pointer;
  user-select: none;
}
.sortable.item.inactive,
.sortable .item.inactive {
  opacity: 0.4;
}
.sortable.item.moved,
.sortable .item.moved {
  --border-color: var(--sortable-moved-border);
  color: var(--sortable-moved-color);
  background-color: var(--sortable-moved-background);
}
.sortable.item[aria-pressed=true],
.sortable .item[aria-pressed=true] {
  --border-color: var(--sortable-moving-border);
  color: var(--sortable-moving-color);
  background-color: var(--sortable-moving-background);
  z-index: 9999;
}

.sortable.list.vertical .sortable.item {
  display: flex;
  align-items: flex-start;
}
.sortable.list.horizontal .sortable.item {
  display: flex;
}
.sortable.list.horizontal .sortable.item:nth-last-child(3) {
  border-right: none;
}

tr.sortable.item {
  display: table-row !important;
}

table.sortable tr.item {
  display: table-row !important;
}
table.sortable tr.moved td, table.sortable tr.moved th {
  --border-color: var(--sortable-moved-border);
  color: var(--sortable-moved-color);
  background-color: var(--sortable-moved-background);
}

.sortable.item[aria-pressed=true] td, .sortable.item[aria-pressed=true] th {
  --border-color: var(--sortable-moving-border);
  color: var(--sortable-moving-color);
  background-color: var(--sortable-moving-background);
  z-index: 9999;
}

:where(.tiles) {
  --tile-min-width: 100px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min-width), 1fr));
}
.tiles > .cols-2 {
  grid-column: auto/span 2;
}
.tiles > .rows-2 {
  grid-row: auto/span 2;
}
.tiles > .cols-3 {
  grid-column: auto/span 3;
}
.tiles > .rows-3 {
  grid-row: auto/span 3;
}
.tiles > .cols-4 {
  grid-column: auto/span 4;
}
.tiles > .rows-4 {
  grid-row: auto/span 4;
}
.tiles > .cols-5 {
  grid-column: auto/span 5;
}
.tiles > .rows-5 {
  grid-row: auto/span 5;
}
.tiles > .cols-6 {
  grid-column: auto/span 6;
}
.tiles > .rows-6 {
  grid-row: auto/span 6;
}
.tiles > .cols-7 {
  grid-column: auto/span 7;
}
.tiles > .rows-7 {
  grid-row: auto/span 7;
}
.tiles > .cols-8 {
  grid-column: auto/span 8;
}
.tiles > .rows-8 {
  grid-row: auto/span 8;
}
.tiles > .cols-9 {
  grid-column: auto/span 9;
}
.tiles > .rows-9 {
  grid-row: auto/span 9;
}
.tiles > .cols-10 {
  grid-column: auto/span 10;
}
.tiles > .rows-10 {
  grid-row: auto/span 10;
}
.tiles > .cols-11 {
  grid-column: auto/span 11;
}
.tiles > .rows-11 {
  grid-row: auto/span 11;
}
.tiles > .cols-12 {
  grid-column: auto/span 12;
}
.tiles > .rows-12 {
  grid-row: auto/span 12;
}
.tiles > .cols-13 {
  grid-column: auto/span 13;
}
.tiles > .rows-13 {
  grid-row: auto/span 13;
}
.tiles > .cols-14 {
  grid-column: auto/span 14;
}
.tiles > .rows-14 {
  grid-row: auto/span 14;
}
.tiles > .cols-15 {
  grid-column: auto/span 15;
}
.tiles > .rows-15 {
  grid-row: auto/span 15;
}
.tiles > .cols-16 {
  grid-column: auto/span 16;
}
.tiles > .rows-16 {
  grid-row: auto/span 16;
}