@helpwave/hightide
Version:
helpwave's component and theming library
1,625 lines • 427 kB
CSS
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--color-red-400: #e3798a;
--color-red-500: #dc576d;
--color-red-600: #d53550;
--color-orange-100: #fbecd9;
--color-orange-500: #ea9e40;
--color-orange-600: #c18133;
--color-orange-900: #4a2f1a;
--color-yellow-400: oklch(85.2% 0.199 91.936);
--color-green-400: oklch(79.2% 0.209 151.711);
--color-green-500: #69cb81;
--color-green-600: #61bf78;
--color-green-700: #53a567;
--color-blue-400: oklch(70.7% 0.165 254.624);
--color-blue-500: #3272df;
--color-blue-600: #285bb2;
--color-blue-900: #11243e;
--color-purple-50: #efe6fd;
--color-purple-100: #ceb0fa;
--color-purple-200: #b892f3;
--color-purple-300: #9b7cdd;
--color-purple-400: #8470c5;
--color-purple-500: #694bb4;
--color-purple-600: #56389b;
--color-gray-100: #e6e6e6;
--color-gray-200: #cccccc;
--color-gray-300: #b3b3b3;
--color-gray-400: #999999;
--color-gray-500: #888888;
--color-gray-600: #666666;
--color-gray-700: #4d4d4d;
--color-gray-800: #333333;
--color-gray-900: #1a1a1a;
--color-black: #000000;
--color-white: #ffffff;
--spacing: 0.25rem;
--container-md: 28rem;
--container-2xl: 42rem;
--text-xs: -webkit-calc(12 / 16 * 1rem);
--text-xs: calc(12 / 16 * 1rem);
--text-xs--line-height: -webkit-calc(15 / 12);
--text-xs--line-height: calc(15 / 12);
--text-sm: -webkit-calc(14 / 16 * 1rem);
--text-sm: calc(14 / 16 * 1rem);
--text-sm--line-height: -webkit-calc(17 / 14);
--text-sm--line-height: calc(17 / 14);
--text-base: 1rem;
--text-base--line-height: -webkit-calc(19 / 16);
--text-base--line-height: calc(19 / 16);
--text-lg: -webkit-calc(18 / 16 * 1rem);
--text-lg: calc(18 / 16 * 1rem);
--text-lg--line-height: -webkit-calc(23 / 18);
--text-lg--line-height: calc(23 / 18);
--text-xl: -webkit-calc(20 / 16 * 1rem);
--text-xl: calc(20 / 16 * 1rem);
--text-xl--line-height: -webkit-calc(26 / 20);
--text-xl--line-height: calc(26 / 20);
--text-2xl: -webkit-calc(22 / 16 * 1rem);
--text-2xl: calc(22 / 16 * 1rem);
--text-2xl--line-height: -webkit-calc(28 / 22);
--text-2xl--line-height: calc(28 / 22);
--text-3xl: -webkit-calc(24 / 16 * 1rem);
--text-3xl: calc(24 / 16 * 1rem);
--text-3xl--line-height: -webkit-calc(30 / 24);
--text-3xl--line-height: calc(30 / 24);
--text-4xl: -webkit-calc(32 / 16 * 1rem);
--text-4xl: calc(32 / 16 * 1rem);
--text-4xl--line-height: -webkit-calc(40 / 32);
--text-4xl--line-height: calc(40 / 32);
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--tracking-wide: 0.025em;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-relaxed: 1.625;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--animate-bounce: bounce 1s infinite;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--color-gray-25: #f8f8f8;
--color-gray-75: #eeeeee;
--color-gray-150: #d8d8d8;
--color-gray-250: #c0c0c0;
--color-gray-650: #555555;
--color-gray-750: #3f3f3f;
--color-gray-850: #222222;
--color-background: var(--color-gray-75);
--color-on-background: var(--color-text-primary);
--color-warning: var(--color-orange-500);
--color-on-warning: var(--color-white);
--color-warning-hover: var(--color-orange-600);
--color-positive: var(--color-green-500);
--color-on-positive: var(--color-white);
--color-positive-hover: var(--color-green-600);
--color-negative: var(--color-red-500);
--color-on-negative: var(--color-white);
--color-negative-hover: var(--color-red-600);
--color-disabled: var(--color-gray-300);
--color-on-disabled: var(--color-gray-500);
--color-surface: var(--color-gray-25);
--color-on-surface: var(--color-text-primary);
--color-surface-hover: var(--color-white);
--color-surface-variant: var(--color-white);
--color-on-surface-variant: var(--color-on-surface);
--color-surface-warning: var(--color-orange-100);
--color-on-surface-warning: var(--color-warning);
--color-text-primary: var(--color-gray-900);
--color-text-secondary: var(--color-gray-600);
--color-text-tertiary: var(--color-gray-300);
--color-placeholder: var(--color-gray-500);
--color-description: var(--color-gray-600);
--color-label: var(--color-gray-700);
--color-primary: var(--color-purple-500);
--color-on-primary: var(--color-white);
--color-primary-hover: var(--color-purple-600);
--color-secondary: var(--color-blue-500);
--color-on-secondary: var(--color-white);
--color-secondary-hover: var(--color-blue-600);
--color-neutral: var(--color-gray-150);
--color-on-neutral: var(--color-black);
--color-neutral-hover: var(--color-gray-200);
--color-neutral-text: var(--color-black);
--color-neutral-text-hover: var(--color-gray-500);
--color-neutral-outline: var(--color-black);
--color-neutral-outline-hover: var(--color-gray-600);
--color-neutral-tonal-text: var(--color-black);
--color-neutral-tonal-background: var(--color-gray-300);
--color-faded: var(--color-gray-250);
--color-highlight: var(--color-blue-500);
--color-carousel-dot-active: var(--color-primary);
--color-carousel-dot-disabled: var(--color-disabled);
--color-input-background: var(--color-surface-variant);
--color-input-text: var(--color-on-surface);
--color-menu-background: var(--color-surface-variant);
--color-menu-text: var(--color-on-surface);
--color-overlay-background: var(--color-surface);
--color-overlay-text: var(--color-on-surface);
--color-overlay-shadow: #00000039;
--color-progress-indicator-fill: var(--color-primary);
--color-progress-indicator-background: var(--color-gray-300);
--color-process-model-edge-stroke: var(--color-primary);
--color-process-model-edge-label-bg: var(--color-gray-100);
--color-process-model-edge-label-text-strong: var(--color-primary);
--color-process-model-edge-label-text-muted: var(--color-purple-300);
--color-process-model-terminal-fill: var(--color-primary);
--color-process-model-terminal-fill-active: var(--color-primary-hover);
--color-process-model-terminal-fill-visited: var(--color-purple-400);
--color-process-model-activity-icon-bg: var(--color-purple-100);
--color-process-model-node-active-ring: var(--color-purple-100);
--color-process-model-node-active-bg: var(--color-purple-50);
--color-process-model-node-visited-border: var(--color-purple-200);
--color-process-model-node-visited-bg: #fdf9ff;
--color-property-title-background: var(--color-gray-100);
--color-property-title-text: var(--color-text-secondary);
--color-stepperbar-dot-active: var(--color-primary);
--color-stepperbar-dot-normal: var(--color-purple-100);
--color-stepperbar-dot-disabled: var(--color-description);
--color-switch-thumb-inactive: var(--color-on-surface);
--color-switch-thumb-active: var(--color-white);
--color-table-background: var(--color-surface);
--color-table-text: var(--color-on-surface);
--color-table-header-background: var(--color-surface-variant);
--color-table-row-hover-background: var(--color-surface-hover);
--color-text-image-primary-background: var(--color-primary);
--color-text-image-primary-text: var(--color-white);
--color-text-image-secondary-background: var(--color-blue-500);
--color-text-image-secondary-text: var(--color-white);
--color-text-image-dark-background: var(--color-blue-900);
--color-text-image-dark-text: var(--color-white);
--color-tooltip-background: var(--color-menu-background);
--color-tooltip-text: var(--color-description);
--color-border: var(--color-gray-200);
--color-divider: var(--color-gray-100);
--color-focus: var(--color-primary);
--color-outline-variant: var(--color-gray-200);
--font-inter: 'Inter', sans-serif;
--font-space: 'Space Grotesk', sans-serif;
--spacing-element-xs: -webkit-calc(7 * var(--spacing));
--spacing-element-xs: calc(7 * var(--spacing));
--spacing-element-sm: -webkit-calc(9 * var(--spacing));
--spacing-element-sm: calc(9 * var(--spacing));
--spacing-element-md: -webkit-calc(
11 * var(--spacing)
);
--spacing-element-md: calc(
11 * var(--spacing)
);
--spacing-element-lg: -webkit-calc(13 * var(--spacing));
--spacing-element-lg: calc(13 * var(--spacing));
--spacing-element-padding-xs: -webkit-calc(
(var(--spacing-element-xs) - 4 * var(--spacing)) / 2
);
--spacing-element-padding-xs: calc(
(var(--spacing-element-xs) - 4 * var(--spacing)) / 2
);
--spacing-element-padding-sm: -webkit-calc(
(var(--spacing-element-sm) - 6 * var(--spacing)) / 2
);
--spacing-element-padding-sm: calc(
(var(--spacing-element-sm) - 6 * var(--spacing)) / 2
);
--spacing-element-padding-md: -webkit-calc(
(var(--spacing-element-md) - 6 * var(--spacing)) / 2
);
--spacing-element-padding-md: calc(
(var(--spacing-element-md) - 6 * var(--spacing)) / 2
);
--spacing-element-padding-lg: -webkit-calc(
(var(--spacing-element-lg) - 8 * var(--spacing)) / 2
);
--spacing-element-padding-lg: calc(
(var(--spacing-element-lg) - 8 * var(--spacing)) / 2
);
--spacing-element-padding-direction-xs: -webkit-calc(
var(--spacing-element-padding-xs) * 1.5
);
--spacing-element-padding-direction-xs: calc(
var(--spacing-element-padding-xs) * 1.5
);
--spacing-element-padding-direction-sm: -webkit-calc(
var(--spacing-element-padding-sm) * 2
);
--spacing-element-padding-direction-sm: calc(
var(--spacing-element-padding-sm) * 2
);
--spacing-element-padding-direction-md: -webkit-calc(
var(--spacing-element-padding-md) * 2
);
--spacing-element-padding-direction-md: calc(
var(--spacing-element-padding-md) * 2
);
--spacing-element-padding-direction-lg: -webkit-calc(
var(--spacing-element-padding-lg) * 3
);
--spacing-element-padding-direction-lg: calc(
var(--spacing-element-padding-lg) * 3
);
}
}
@layer base {
::-webkit-file-upload-button {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
*, ::after, ::before, ::backdrop, ::file-selector-button {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
::-webkit-file-upload-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
-webkit-padding-start: 20px;
padding-inline-start: 20px;
}
::-webkit-file-upload-button {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
::file-selector-button {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
::-webkit-input-placeholder {
opacity: 1;
}
::-moz-placeholder {
opacity: 1;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::-webkit-input-placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
::-moz-placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
appearance: button;
}
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
}
@layer utilities {
.pointer-events-none {
pointer-events: none;
}
.collapse {
visibility: collapse;
}
.visible {
visibility: visible;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.relative {
position: relative;
}
.static {
position: static;
}
.sticky {
position: -webkit-sticky;
position: sticky;
}
.inset-0 {
inset: -webkit-calc(var(--spacing) * 0);
inset: calc(var(--spacing) * 0);
}
.-top-1 {
top: -webkit-calc(var(--spacing) * -1);
top: calc(var(--spacing) * -1);
}
.top-0 {
top: -webkit-calc(var(--spacing) * 0);
top: calc(var(--spacing) * 0);
}
.top-1\/2 {
top: -webkit-calc(1/2 * 100%);
top: calc(1/2 * 100%);
}
.top-2 {
top: -webkit-calc(var(--spacing) * 2);
top: calc(var(--spacing) * 2);
}
.-right-1 {
right: -webkit-calc(var(--spacing) * -1);
right: calc(var(--spacing) * -1);
}
.right-0 {
right: -webkit-calc(var(--spacing) * 0);
right: calc(var(--spacing) * 0);
}
.right-1\/2 {
right: -webkit-calc(1/2 * 100%);
right: calc(1/2 * 100%);
}
.right-2 {
right: -webkit-calc(var(--spacing) * 2);
right: calc(var(--spacing) * 2);
}
.bottom-0 {
bottom: -webkit-calc(var(--spacing) * 0);
bottom: calc(var(--spacing) * 0);
}
.left-0 {
left: -webkit-calc(var(--spacing) * 0);
left: calc(var(--spacing) * 0);
}
.left-1\/2 {
left: -webkit-calc(1/2 * 100%);
left: calc(1/2 * 100%);
}
.left-2 {
left: -webkit-calc(var(--spacing) * 2);
left: calc(var(--spacing) * 2);
}
.left-4 {
left: -webkit-calc(var(--spacing) * 4);
left: calc(var(--spacing) * 4);
}
.left-\[50\%\] {
left: 50%;
}
.z-1 {
z-index: 1;
}
.z-10 {
z-index: 10;
}
.z-\[1\] {
z-index: 1;
}
.container {
width: 100%;
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
@media (width >= 96rem) {
max-width: 96rem;
}
}
.mx-2 {
margin-inline: -webkit-calc(var(--spacing) * 2);
margin-inline: calc(var(--spacing) * 2);
}
.mx-4 {
margin-inline: -webkit-calc(var(--spacing) * 4);
margin-inline: calc(var(--spacing) * 4);
}
.my-2 {
margin-block: -webkit-calc(var(--spacing) * 2);
margin-block: calc(var(--spacing) * 2);
}
.mt-2 {
margin-top: -webkit-calc(var(--spacing) * 2);
margin-top: calc(var(--spacing) * 2);
}
.mt-3 {
margin-top: -webkit-calc(var(--spacing) * 3);
margin-top: calc(var(--spacing) * 3);
}
.mt-4 {
margin-top: -webkit-calc(var(--spacing) * 4);
margin-top: calc(var(--spacing) * 4);
}
.mt-12 {
margin-top: -webkit-calc(var(--spacing) * 12);
margin-top: calc(var(--spacing) * 12);
}
.mr-10 {
margin-right: -webkit-calc(var(--spacing) * 10);
margin-right: calc(var(--spacing) * 10);
}
.mb-2 {
margin-bottom: -webkit-calc(var(--spacing) * 2);
margin-bottom: calc(var(--spacing) * 2);
}
.-ml-1 {
margin-left: -webkit-calc(var(--spacing) * -1);
margin-left: calc(var(--spacing) * -1);
}
.ml-0\.5 {
margin-left: -webkit-calc(var(--spacing) * 0.5);
margin-left: calc(var(--spacing) * 0.5);
}
.flex-row-0 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-column-gap: -webkit-calc(var(--spacing) * 0);
-moz-column-gap: calc(var(--spacing) * 0);
column-gap: calc(var(--spacing) * 0);
}
.flex-row-0\.5 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-column-gap: -webkit-calc(var(--spacing) * 0.5);
-moz-column-gap: calc(var(--spacing) * 0.5);
column-gap: calc(var(--spacing) * 0.5);
}
.flex-row-1 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-column-gap: -webkit-calc(var(--spacing) * 1);
-moz-column-gap: calc(var(--spacing) * 1);
column-gap: calc(var(--spacing) * 1);
}
.flex-row-2 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-column-gap: -webkit-calc(var(--spacing) * 2);
-moz-column-gap: calc(var(--spacing) * 2);
column-gap: calc(var(--spacing) * 2);
}
.flex-row-4 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-column-gap: -webkit-calc(var(--spacing) * 4);
-moz-column-gap: calc(var(--spacing) * 4);
column-gap: calc(var(--spacing) * 4);
}
.flex-row-6 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-column-gap: -webkit-calc(var(--spacing) * 6);
-moz-column-gap: calc(var(--spacing) * 6);
column-gap: calc(var(--spacing) * 6);
}
.flex-row-8 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-column-gap: -webkit-calc(var(--spacing) * 8);
-moz-column-gap: calc(var(--spacing) * 8);
column-gap: calc(var(--spacing) * 8);
}
.flex-col-0 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
row-gap: -webkit-calc(var(--spacing) * 0);
row-gap: calc(var(--spacing) * 0);
}
.flex-col-1 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
row-gap: -webkit-calc(var(--spacing) * 1);
row-gap: calc(var(--spacing) * 1);
}
.flex-col-2 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
row-gap: -webkit-calc(var(--spacing) * 2);
row-gap: calc(var(--spacing) * 2);
}
.flex-col-3 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
row-gap: -webkit-calc(var(--spacing) * 3);
row-gap: calc(var(--spacing) * 3);
}
.flex-col-4 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
row-gap: -webkit-calc(var(--spacing) * 4);
row-gap: calc(var(--spacing) * 4);
}
.flex-col-6 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
row-gap: -webkit-calc(var(--spacing) * 6);
row-gap: calc(var(--spacing) * 6);
}
.flex-col-8 {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
row-gap: -webkit-calc(var(--spacing) * 8);
row-gap: calc(var(--spacing) * 8);
}
.block {
display: block;
}
.contents {
display: contents;
}
.flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
.table {
display: table;
}
.size-force-4 {
height: -webkit-calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
min-height: -webkit-calc(var(--spacing) * 4);
min-height: calc(var(--spacing) * 4);
max-height: -webkit-calc(var(--spacing) * 4);
max-height: calc(var(--spacing) * 4);
width: -webkit-calc(var(--spacing) * 4);
width: calc(var(--spacing) * 4);
min-width: -webkit-calc(var(--spacing) * 4);
min-width: calc(var(--spacing) * 4);
max-width: -webkit-calc(var(--spacing) * 4);
max-width: calc(var(--spacing) * 4);
}
.size-force-5 {
height: -webkit-calc(var(--spacing) * 5);
height: calc(var(--spacing) * 5);
min-height: -webkit-calc(var(--spacing) * 5);
min-height: calc(var(--spacing) * 5);
max-height: -webkit-calc(var(--spacing) * 5);
max-height: calc(var(--spacing) * 5);
width: -webkit-calc(var(--spacing) * 5);
width: calc(var(--spacing) * 5);
min-width: -webkit-calc(var(--spacing) * 5);
min-width: calc(var(--spacing) * 5);
max-width: -webkit-calc(var(--spacing) * 5);
max-width: calc(var(--spacing) * 5);
}
.size-force-6 {
height: -webkit-calc(var(--spacing) * 6);
height: calc(var(--spacing) * 6);
min-height: -webkit-calc(var(--spacing) * 6);
min-height: calc(var(--spacing) * 6);
max-height: -webkit-calc(var(--spacing) * 6);
max-height: calc(var(--spacing) * 6);
width: -webkit-calc(var(--spacing) * 6);
width: calc(var(--spacing) * 6);
min-width: -webkit-calc(var(--spacing) * 6);
min-width: calc(var(--spacing) * 6);
max-width: -webkit-calc(var(--spacing) * 6);
max-width: calc(var(--spacing) * 6);
}
.expandable-content-h-40 {
height: -webkit-calc(var(--spacing) * 40);
height: calc(var(--spacing) * 40);
&[data-expanded] {
max-height: -webkit-calc(var(--spacing) * 40);
max-height: calc(var(--spacing) * 40);
}
}
.expandable-content-h-43 {
height: -webkit-calc(var(--spacing) * 43);
height: calc(var(--spacing) * 43);
&[data-expanded] {
max-height: -webkit-calc(var(--spacing) * 43);
max-height: calc(var(--spacing) * 43);
}
}
.size-4 {
width: -webkit-calc(var(--spacing) * 4);
width: calc(var(--spacing) * 4);
height: -webkit-calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
.size-5 {
width: -webkit-calc(var(--spacing) * 5);
width: calc(var(--spacing) * 5);
height: -webkit-calc(var(--spacing) * 5);
height: calc(var(--spacing) * 5);
}
.size-6 {
width: -webkit-calc(var(--spacing) * 6);
width: calc(var(--spacing) * 6);
height: -webkit-calc(var(--spacing) * 6);
height: calc(var(--spacing) * 6);
}
.size-7 {
width: -webkit-calc(var(--spacing) * 7);
width: calc(var(--spacing) * 7);
height: -webkit-calc(var(--spacing) * 7);
height: calc(var(--spacing) * 7);
}
.size-9 {
width: -webkit-calc(var(--spacing) * 9);
width: calc(var(--spacing) * 9);
height: -webkit-calc(var(--spacing) * 9);
height: calc(var(--spacing) * 9);
}
.element {
padding: var(--element-padding, var(--spacing-element-padding-md)) var(--element-padding-direction, var(--spacing-element-padding-direction-md));
border-radius: var(--element-border-radius, 0.375rem);
height: var(--element-height, var(--spacing-element-md));
}
.h-2 {
height: -webkit-calc(var(--spacing) * 2);
height: calc(var(--spacing) * 2);
}
.h-3 {
height: -webkit-calc(var(--spacing) * 3);
height: calc(var(--spacing) * 3);
}
.h-4 {
height: -webkit-calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
.h-6 {
height: -webkit-calc(var(--spacing) * 6);
height: calc(var(--spacing) * 6);
}
.h-10 {
height: -webkit-calc(var(--spacing) * 10);
height: calc(var(--spacing) * 10);
}
.h-14 {
height: -webkit-calc(var(--spacing) * 14);
height: calc(var(--spacing) * 14);
}
.h-24 {
height: -webkit-calc(var(--spacing) * 24);
height: calc(var(--spacing) * 24);
}
.h-32 {
height: -webkit-calc(var(--spacing) * 32);
height: calc(var(--spacing) * 32);
}
.h-48 {
height: -webkit-calc(var(--spacing) * 48);
height: calc(var(--spacing) * 48);
}
.h-64 {
height: -webkit-calc(var(--spacing) * 64);
height: calc(var(--spacing) * 64);
}
.h-80 {
height: -webkit-calc(var(--spacing) * 80);
height: calc(var(--spacing) * 80);
}
.h-90 {
height: -webkit-calc(var(--spacing) * 90);
height: calc(var(--spacing) * 90);
}
.h-96 {
height: -webkit-calc(var(--spacing) * 96);
height: calc(var(--spacing) * 96);
}
.h-128 {
height: -webkit-calc(var(--spacing) * 128);
height: calc(var(--spacing) * 128);
}
.h-150 {
height: -webkit-calc(var(--spacing) * 150);
height: calc(var(--spacing) * 150);
}
.h-element-sm {
height: var(--spacing-element-sm);
}
.h-full {
height: 100%;
}
.h-screen {
height: 100vh;
}
.max-h-0 {
max-height: -webkit-calc(var(--spacing) * 0);
max-height: calc(var(--spacing) * 0);
}
.max-h-4 {
max-height: -webkit-calc(var(--spacing) * 4);
max-height: calc(var(--spacing) * 4);
}
.max-h-8 {
max-height: -webkit-calc(var(--spacing) * 8);
max-height: calc(var(--spacing) * 8);
}
.max-h-12 {
max-height: -webkit-calc(var(--spacing) * 12);
max-height: calc(var(--spacing) * 12);
}
.max-h-16 {
max-height: -webkit-calc(var(--spacing) * 16);
max-height: calc(var(--spacing) * 16);
}
.max-h-24 {
max-height: -webkit-calc(var(--spacing) * 24);
max-height: calc(var(--spacing) * 24);
}
.max-h-128 {
max-height: -webkit-calc(var(--spacing) * 128);
max-height: calc(var(--spacing) * 128);
}
.max-h-200 {
max-height: -webkit-calc(var(--spacing) * 200);
max-height: calc(var(--spacing) * 200);
}
.\!min-h-10 {
min-height: -webkit-calc(var(--spacing) * 10) !important;
min-height: calc(var(--spacing) * 10) !important;
}
.min-h-0 {
min-height: -webkit-calc(var(--spacing) * 0);
min-height: calc(var(--spacing) * 0);
}
.min-h-3 {
min-height: -webkit-calc(var(--spacing) * 3);
min-height: calc(var(--spacing) * 3);
}
.min-h-8 {
min-height: -webkit-calc(var(--spacing) * 8);
min-height: calc(var(--spacing) * 8);
}
.min-h-9\/10 {
min-height: -webkit-calc(9/10 * 100%);
min-height: calc(9/10 * 100%);
}
.min-h-12 {
min-height: -webkit-calc(var(--spacing) * 12);
min-height: calc(var(--spacing) * 12);
}
.min-h-16 {
min-height: -webkit-calc(var(--spacing) * 16);
min-height: calc(var(--spacing) * 16);
}
.min-h-60 {
min-height: -webkit-calc(var(--spacing) * 60);
min-height: calc(var(--spacing) * 60);
}
.min-h-64 {
min-height: -webkit-calc(var(--spacing) * 64);
min-height: calc(var(--spacing) * 64);
}
.min-h-128 {
min-height: -webkit-calc(var(--spacing) * 128);
min-height: calc(var(--spacing) * 128);
}
.min-h-200 {
min-height: -webkit-calc(var(--spacing) * 200);
min-height: calc(var(--spacing) * 200);
}
.min-h-1000 {
min-height: -webkit-calc(var(--spacing) * 1000);
min-height: calc(var(--spacing) * 1000);
}
.min-h-\[52px\] {
min-height: 52px;
}
.min-h-\[400px\] {
min-height: 400px;
}
.w-2 {
width: -webkit-calc(var(--spacing) * 2);
width: calc(var(--spacing) * 2);
}
.w-4 {
width: -webkit-calc(var(--spacing) * 4);
width: calc(var(--spacing) * 4);
}
.w-5 {
width: -webkit-calc(var(--spacing) * 5);
width: calc(var(--spacing) * 5);
}
.w-6 {
width: -webkit-calc(var(--spacing) * 6);
width: calc(var(--spacing) * 6);
}
.w-8 {
width: -webkit-calc(var(--spacing) * 8);
width: calc(var(--spacing) * 8);
}
.w-10 {
width: -webkit-calc(var(--spacing) * 10);
width: calc(var(--spacing) * 10);
}
.w-24 {
width: -webkit-calc(var(--spacing) * 24);
width: calc(var(--spacing) * 24);
}
.w-64 {
width: -webkit-calc(var(--spacing) * 64);
width: calc(var(--spacing) * 64);
}
.w-72 {
width: -webkit-calc(var(--spacing) * 72);
width: calc(var(--spacing) * 72);
}
.w-80 {
width: -webkit-calc(var(--spacing) * 80);
width: calc(var(--spacing) * 80);
}
.w-90 {
width: -webkit-calc(var(--spacing) * 90);
width: calc(var(--spacing) * 90);
}
.w-96 {
width: -webkit-calc(var(--spacing) * 96);
width: calc(var(--spacing) * 96);
}
.w-120 {
width: -webkit-calc(var(--spacing) * 120);
width: calc(var(--spacing) * 120);
}
.w-128 {
width: -webkit-calc(var(--spacing) * 128);
width: calc(var(--spacing) * 128);
}
.w-150 {
width: -webkit-calc(var(--spacing) * 150);
width: calc(var(--spacing) * 150);
}
.w-\[20\%\] {
width: 20%;
}
.w-\[70\%\] {
width: 70%;
}
.w-fit {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.w-full {
width: 100%;
}
.w-min {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
.w-screen {
width: 100vw;
}
.max-w-2xl {
max-width: var(--container-2xl);
}
.max-w-4 {
max-width: -webkit-calc(var(--spacing) * 4);
max-width: calc(var(--spacing) * 4);
}
.max-w-8 {
max-width: -webkit-calc(var(--spacing) * 8);
max-width: calc(var(--spacing) * 8);
}
.max-w-12 {
max-width: -webkit-calc(var(--spacing) * 12);
max-width: calc(var(--spacing) * 12);
}
.max-w-16 {
max-width: -webkit-calc(var(--spacing) * 16);
max-width: calc(var(--spacing) * 16);
}
.max-w-20 {
max-width: -webkit-calc(var(--spacing) * 20);
max-width: calc(var(--spacing) * 20);
}
.max-w-24 {
max-width: -webkit-calc(var(--spacing) * 24);
max-width: calc(var(--spacing) * 24);
}
.max-w-64 {
max-width: -webkit-calc(var(--spacing) * 64);
max-width: calc(var(--spacing) * 64);
}
.max-w-128 {
max-width: -webkit-calc(var(--spacing) * 128);
max-width: calc(var(--spacing) * 128);
}
.max-w-\[900px\] {
max-width: 900px;
}
.max-w-full {
max-width: 100%;
}
.max-w-md {
max-width: var(--container-md);
}
.min-w-0 {
min-width: -webkit-calc(var(--spacing) * 0);
min-width: calc(var(--spacing) * 0);
}
.min-w-8 {
min-width: -webkit-calc(var(--spacing) * 8);
min-width: calc(var(--spacing) * 8);
}
.min-w-12 {
min-width: -webkit-calc(var(--spacing) * 12);
min-width: calc(var(--spacing) * 12);
}
.min-w-16 {
min-width: -webkit-calc(var(--spacing) * 16);
min-width: calc(var(--spacing) * 16);
}
.min-w-20 {
min-width: -webkit-calc(var(--spacing) * 20);
min-width: calc(var(--spacing) * 20);
}
.min-w-24 {
min-width: -webkit-calc(var(--spacing) * 24);
min-width: calc(var(--spacing) * 24);
}
.min-w-36 {
min-width: -webkit-calc(var(--spacing) * 36);
min-width: calc(var(--spacing) * 36);
}
.min-w-40 {
min-width: -webkit-calc(var(--spacing) * 40);
min-width: calc(var(--spacing) * 40);
}
.min-w-48 {
min-width: -webkit-calc(var(--spacing) * 48);
min-width: calc(var(--spacing) * 48);
}
.min-w-56 {
min-width: -webkit-calc(var(--spacing) * 56);
min-width: calc(var(--spacing) * 56);
}
.min-w-64 {
min-width: -webkit-calc(var(--spacing) * 64);
min-width: calc(var(--spacing) * 64);
}
.min-w-72 {
min-width: -webkit-calc(var(--spacing) * 72);
min-width: calc(var(--spacing) * 72);
}
.min-w-\[40px\] {
min-width: 40px;
}
.min-w-auto {
min-width: auto;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.flex-\[2\] {
-webkit-box-flex: 2;
-webkit-flex: 2;
flex: 2;
}
.flex-\[5\] {
-webkit-box-flex: 5;
-webkit-flex: 5;
flex: 5;
}
.shrink {
-webkit-flex-shrink: 1;
flex-shrink: 1;
}
.shrink-0 {
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.grow {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.border-collapse {
border-collapse: collapse;
}
.-translate-x-1\/2 {
--tw-translate-x: -webkit-calc(-webkit-calc(1/2 * 100%) * -1);
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-1\/2 {
--tw-translate-x: -webkit-calc(1/2 * 100%);
--tw-translate-x: calc(1/2 * 100%);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
--tw-translate-y: -webkit-calc(-webkit-calc(1/2 * 100%) * -1);
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-2\/3 {
--tw-translate-y: -webkit-calc(2/3 * 100%);
--tw-translate-y: calc(2/3 * 100%);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.transform {
-webkit-transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.animate-azd-fill-back {
-webkit-animation: azdFillBack var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
animation: azdFillBack var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
}
.animate-azd-fill-front {
-webkit-animation: azdFillFront var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
animation: azdFillFront var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
}
.animate-bounce {
-webkit-animation: var(--animate-bounce);
animation: var(--animate-bounce);
}
.animate-pulse {
-webkit-animation: var(--animate-pulse);
animation: var(--animate-pulse);
}
.animate-wave-big-left-up {
-webkit-animation: bigLeftUp var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
animation: bigLeftUp var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
}
.animate-wave-big-right-down {
animation: bigRightDown var(--helpwave-loading-duration, 1.7s) ease-in infinite reverse;
}
.animate-wave-small-left-up {
-webkit-animation: smallLeftUp var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
animation: smallLeftUp var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
}
.animate-wave-small-right-down {
animation: smallRightDown var(--helpwave-loading-duration, 1.7s) ease-in infinite reverse;
}
.input-element {
border-style: var(--tw-border-style);
border-width: 2px;
--focus-outline: none;
--focus-outline-offset: 0;
--focus-box-shadow: none;
--focus-border-color: inherit;
--focus-box-shadow: 0 0 -webkit-calc(var(--spacing) * 1) -webkit-calc(var(--spacing) * 0.8)
color-mix(in srgb, #694bb4 35%, transparent);
--focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8)
color-mix(in srgb, #694bb4 35%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--focus-box-shadow: 0 0 -webkit-calc(var(--spacing) * 1) -webkit-calc(var(--spacing) * 0.8)
color-mix(in srgb, var(--color-focus) 35%, transparent);
--focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8)
color-mix(in srgb, var(--color-focus) 35%, transparent);
}
&:where([data-theme=dark], [data-theme=dark] *) {
--focus-box-shadow: 0 0 -webkit-calc(var(--spacing) * 1.5)
-webkit-calc(var(--spacing) * 0.8)
color-mix(in srgb, #694bb4 60%, transparent);
--focus-box-shadow: 0 0 calc(var(--spacing) * 1.5)
calc(var(--spacing) * 0.8)
color-mix(in srgb, #694bb4 60%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--focus-box-shadow: 0 0 -webkit-calc(var(--spacing) * 1.5)
-webkit-calc(var(--spacing) * 0.8)
color-mix(in srgb, var(--color-focus) 60%, transparent);
--focus-box-shadow: 0 0 calc(var(--spacing) * 1.5)
calc(var(--spacing) * 0.8)
color-mix(in srgb, var(--color-focus) 60%, transparent);
}
}
--focus-border-color: var(--color-focus);
-webkit-transition: border-color var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out, -webkit-box-shadow var(--animation-duration-in, 250ms) ease-in-out;
transition: border-color var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out, -webkit-box-shadow var(--animation-duration-in, 250ms) ease-in-out;
transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out, -webkit-box-shadow var(--animation-duration-in, 250ms) ease-in-out;
&:not([data-disabled]):not([data-invalid]) {
background-color: var(--color-input-background);
&:not([data-readonly]) {
&:hover {
@media (hover: hover) {
border-color: var(--color-primary-hover);
}
}
}
&:not([data-value]) {
color: var(--color-placeholder);
}
&[data-value] {
color: var(--color-input-text);
}
}
&:not([data-disabled])[data-invalid] {
border-color: var(--color-negative);
background-color: color-mix(in srgb, #dc576d 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-negative) 20%, transparent);
}
&:not([data-readonly]) {
&:hover {
@media (hover: hover) {
border-color: var(--color-negative-hover);
}
}
}
--color-focus: var(--color-negative);
&[data-value] {
color: var(--color-negative);
}
&:not([data-value]) {
color: var(--color-placeholder);
}
}
&[data-disabled] {
cursor: not-allowed;
border-color: var(--color-disabled);
background-color: var(--color-disabled);
color: var(--color-on-disabled);
&::-webkit-input-placeholder {
color: transparent;
}
&::-moz-placeholder {
color: transparent;
}
&::placeholder {
color: transparent;
}
}
}
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
.touch-manipulation {
touch-action: manipulation;
}
.touch-none {
touch-action: none;
}
.resize {
resize: both;
}
.resize-none {
resize: none;
}
.input-indicator-hidden {
-webkit-appearance: none;
appearance: none;
-moz-appearance: textfield;
&::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
}
&::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
}
}
.flex-col {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.items-center {
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.items-start {
-webkit-box-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.justify-between {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.justify-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.justify-end {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.justify-start {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.gap-1 {
gap: -webkit-calc(var(--spacing) * 1);
gap: calc(var(--spacing) * 1);
}
.gap-2 {
gap: -webkit-calc(var(--spacing) * 2);
gap: calc(var(--spacing) * 2);
}
.gap-4 {
gap: -webkit-calc(var(--spacing) * 4);
gap: calc(var(--spacing) * 4);
}
.gap-8 {
gap: -webkit-calc(var(--spacing) * 8);
gap: calc(var(--spacing) * 8);
}
.gap-x-1 {
-webkit-column-gap: -webkit-calc(var(--spacing) * 1);
-moz-column-gap: calc(var(--spacing) * 1);
column-gap: calc(var(--spacing) * 1);
}
.gap-x-2 {
-webkit-column-gap: -webkit-calc(var(--spacing) * 2);
-moz-column-gap: calc(var(--spacing) * 2);
column-gap: calc(var(--spacing) * 2);
}
.gap-x-6 {
-webkit-column-gap: -webkit-calc(var(--spacing) * 6);
-moz-column-gap: calc(var(--spacing) * 6);
column-gap: calc(var(--spacing) * 6);
}
.gap-y-1 {
row-gap: -webkit-calc(var(--spacing) * 1);
row-gap: calc(var(--spacing) * 1);
}
.gap-y-2 {
row-gap: -webkit-calc(var(--spacing) * 2);
row-gap: calc(var(--spacing) * 2);
}
.gap-y-2\.5 {
row-gap: -webkit-calc(var(--spacing) * 2.5);
row-gap: calc(var(--spacing) * 2.5);
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-y-auto {
overflow-y: auto;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: var(--radius-2xl);
}
.rounded-full {
border-radius: -webkit-calc(infinity * 1px);
border-radius: calc(infinity * 1px);
}
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-md {
border-radius: var(--radius-md);
}
.rounded-t-lg {
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-0 {
border-style: var(--tw-border-style);
border-width: 0px;
}
.border-2 {
border-style: var(--tw-border-style);
border-width: 2px;
}
.border-4 {
border-style: var(--tw-border-style);
border-width: 4px;
}
.coloring-style-hover-detect {
&[data-coloringstyle="solid"] {
background-color: var(--coloring-solid-color,var(--coloring-color));
color: var(--coloring-solid-text,var(--coloring-on-color));
&:hover {
@media (hover: hover) {
background-color: var(--coloring-solid-hover,var(--coloring-hover));
}
}
}
&[data-coloringstyle="text"] {
color: var(--coloring-text,var(--coloring-color));
&:hover {
@media (hover: hover) {
background-color: var(--coloring-text-hover,var(--coloring-text,var(--coloring-color)));
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--coloring-text-hover,var(--coloring-text,var(--coloring-color))) 20%, transparent);
}
}
}
}
&[data-coloringstyle="outline"] {
border-width: var(--coloring-outline-width, 0.125rem);
border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
color: var(--coloring-outline,var(--coloring-color));
&:hover {
@media (hover: hover) {
border-color: var(--coloring-border-ho