/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */ button, .btn { cursor: pointer; align-items: center; gap: calc(var(--spacing, .25rem) * 3); border-radius: var(--radius-lg, .5rem); border-style: var(--tw-border-style); --tw-border-style: solid; height: fit-content; padding-inline: calc(var(--spacing, .25rem) * 4); padding-block: calc(var(--spacing, .25rem) * 2); --tw-font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal, 400); --tw-tracking: var(--tracking-wide, .025em); letter-spacing: var(--tracking-wide, .025em); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); border-style: solid; border-width: 1px; transition: border-color .1s ease-in-out, background-color .2s; display: flex; } :is(button, .btn):not(.button__subtle, .button__ghost):hover { --tw-shadow-color: var(--color-black, #000); } :is(button, .btn)[disabled], :is(button, .btn).disabled { pointer-events: none; cursor: not-allowed; opacity: .5; } :is(button, .btn) svg { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); transition-property: stroke; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); --tw-duration: .4s; --tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1)); transition-duration: .4s; transition-timing-function: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1)); } :is(button, .btn).btn__sm svg { width: calc(var(--spacing, .25rem) * 4); height: calc(var(--spacing, .25rem) * 4); } :is(button, .btn).btn__lg svg { width: calc(var(--spacing, .25rem) * 6); height: calc(var(--spacing, .25rem) * 6); } :is(button, .btn):hover { color: var(--color-white, #fff) !important; } :is(button, .btn):hover svg { stroke: var(--color-white, #fff) !important; } :is(button, .btn).btn__primary { border-color: var(--color-sky-100, oklch(.951 .026 236.824)); background-color: color-mix(in oklab, var(--color-sky-100, oklch(.951 .026 236.824)) 10%, transparent); color: var(--color-sky-100, oklch(.951 .026 236.824)); } :is(button, .btn).btn__primary svg { stroke: var(--color-sky-200, oklch(.901 .058 230.902)); } :is(button, .btn).btn__primary:hover { border-color: var(--color-sky-300, oklch(.828 .111 230.318)); background-color: color-mix(in oklab, var(--color-sky-400, oklch(.746 .16 232.661)) 40%, transparent); } :is(button, .btn).btn__secondary { border-color: var(--color-amber-100, oklch(.962 .059 95.617)); background-color: color-mix(in oklab, var(--color-amber-100, oklch(.962 .059 95.617)) 10%, transparent); color: var(--color-amber-100, oklch(.962 .059 95.617)); } :is(button, .btn).btn__secondary svg { stroke: var(--color-amber-300, oklch(.879 .169 91.605)); } :is(button, .btn).btn__secondary:hover { border-color: var(--color-amber-400, oklch(.828 .189 84.429)); background-color: color-mix(in oklab, var(--color-amber-400, oklch(.828 .189 84.429)) 40%, transparent); } :is(button, .btn).btn__danger { border-color: var(--color-rose-100, oklch(.941 .03 12.58)); background-color: color-mix(in oklab, var(--color-rose-200, oklch(.892 .058 10.001)) 20%, transparent); color: var(--color-rose-200, oklch(.892 .058 10.001)); } :is(button, .btn).btn__danger svg { stroke: var(--color-rose-400, oklch(.712 .194 13.428)); } :is(button, .btn).btn__danger:hover { border-color: var(--color-rose-500, oklch(.645 .246 16.439)); background-color: color-mix(in oklab, var(--color-rose-400, oklch(.712 .194 13.428)) 40%, transparent); color: var(--color-white, #fff); } :is(button, .btn).btn__dark { border-color: var(--color-slate-400, oklch(.704 .04 256.788)); background-color: color-mix(in oklab, var(--color-slate-200, oklch(.929 .013 255.508)) 10%, transparent); color: var(--color-slate-100, oklch(.968 .007 247.896)); } :is(button, .btn).btn__dark svg { stroke: var(--color-slate-300, oklch(.869 .022 252.894)); } :is(button, .btn).btn__dark:hover { border-color: var(--color-slate-200, oklch(.929 .013 255.508)); background-color: color-mix(in oklab, var(--color-slate-400, oklch(.704 .04 256.788)) 40%, transparent); color: var(--color-white, #fff); } :is(button, .btn).btn__success { border-color: var(--color-lime-100, oklch(.967 .067 122.328)); background-color: color-mix(in oklab, var(--color-lime-200, oklch(.938 .127 124.321)) 10%, transparent); color: var(--color-lime-100, oklch(.967 .067 122.328)); } :is(button, .btn).btn__success svg { stroke: var(--color-lime-400, oklch(.841 .238 128.85)); } :is(button, .btn).btn__success:hover { border-color: var(--color-lime-500, oklch(.768 .233 130.85)); background-color: color-mix(in oklab, var(--color-lime-400, oklch(.841 .238 128.85)) 40%, transparent); color: var(--color-white, #fff); } :is(button, .btn).btn__subtle { color: var(--color-white, #fff); background-color: #0000; border-color: #0000; } @media (hover: hover) { :is(button, .btn).btn__subtle:hover { background-color: color-mix(in oklab, var(--color-white, #fff) 10%, transparent); } } :is(button, .btn).btn__subtle:hover { border-color: color-mix(in oklab, var(--color-white, #fff) 40%, transparent); background-color: color-mix(in oklab, var(--color-white, #fff) 20%, transparent); --tw-gradient-to: color-mix(in oklab, var(--color-white, #fff) 30%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } :is(button, .btn).btn__ghost { color: color-mix(in oklab, var(--color-white, #fff) 80%, transparent); background-color: #0000; border-color: #0000; } @media (hover: hover) { :is(button, .btn).btn__ghost:hover { color: var(--color-white, #fff); } } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-tracking { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-duration { syntax: "*"; inherits: false } @property --tw-ease { syntax: "*"; inherits: false } @property --tw-gradient-position { syntax: "*"; inherits: false } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false } @property --tw-gradient-via-stops { syntax: "*"; inherits: false } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } /*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */ .dialog-container { position: relative; } .dialog-container dialog { pointer-events: none; z-index: 50; --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); max-width: calc(100vw - 2rem); translate: var(--tw-translate-x) var(--tw-translate-y); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); color: var(--color-slate-200, oklch(.929 .013 255.508)); position: fixed; top: 50%; left: 50%; } .dialog-container dialog[open] { pointer-events: auto; } .dialog-container dialog::backdrop { background-color: color-mix(in oklab, var(--color-black, #000) 50%, transparent); --tw-backdrop-blur: blur(var(--blur-xs, 4px)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1))); transition-duration: var(--tw-duration, var(--default-transition-duration, .15s)); } .dialog-container dialog .dialog__close { top: calc(var(--spacing, .25rem) * 4); right: calc(var(--spacing, .25rem) * 4); padding: calc(var(--spacing, .25rem) * 0); color: var(--color-white, #fff); position: absolute; } .dialog-container dialog .dialog__close svg { width: calc(var(--spacing, .25rem) * 5); height: calc(var(--spacing, .25rem) * 5); } .dialog__content > :first-child { padding-right: calc(var(--spacing, .25rem) * 8); } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-backdrop-blur { syntax: "*"; inherits: false } @property --tw-backdrop-brightness { syntax: "*"; inherits: false } @property --tw-backdrop-contrast { syntax: "*"; inherits: false } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false } @property --tw-backdrop-invert { syntax: "*"; inherits: false } @property --tw-backdrop-opacity { syntax: "*"; inherits: false } @property --tw-backdrop-saturate { syntax: "*"; inherits: false } @property --tw-backdrop-sepia { syntax: "*"; inherits: false }