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

React UI Components

: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:.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:.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:.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:.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:rgba(0,0,0,0)}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:rgba(0,0,0,0);color:var(--selectable-color);transition:background-color .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 .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:.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 rgba(0,0,0,0)}.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:.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:.5rem;margin-top:.5rem}.multiselect .selections .selection{display:flex;align-items:center;gap:.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:.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:.5em}.pager .pages{display:flex;gap:.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:.25em 0}.range:has(.range-values.smaller,.range-values.smallest){padding-top:0em}.range:has(.range-values.large){padding-top:.5em}.range:has(.range-values.larger){padding-top:.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:.25em}.search .inputs.round .suffix{margin-right:.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}: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:.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}