:root, .light, .default, [data-theme="light"], [data-theme="default"] { color-scheme: light; --white: #fff; --black: #000; --snow: #fcfcfc; --eclipse: #18181b; --border-width: 1px; --field-border-width: 0px; --disabled-opacity: 0.5; --ring-offset-width: 2px; --cursor-interactive: pointer; --cursor-disabled: not-allowed; --scrollbar-track: transparent; --scrollbar-gutter: auto; --scrollbar-width: thin; --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); --default: #ebebec; --default-foreground: var(--eclipse); --accent: #4c8ac8; --accent-foreground: var(--snow); --field-background: var(--white); --field-foreground: #18181b; --field-placeholder: var(--muted); --field-border: transparent; --success: #17c964; --success-foreground: var(--eclipse); --warning: #f5a524; --warning-foreground: var(--eclipse); --danger: #ff383c; --danger-foreground: var(--snow); --segment: var(--white); --segment-foreground: var(--eclipse); --separator: #e4e4e7; --focus: var(--accent); --link: var(--foreground); --backdrop: #00000080; --surface-hover: var(--surface); --border: #28282c; --text-xs: 10.5px; --text-sm: 12px; --text-md: 14px; --text-lg: 16px; --text-xlg: 20px; --primary-color: #000000; --main-padding: 6px; --spacing: 2px; --radius: 2px; --button-border-color: var(--border); --button-border-size: 1px; --button-bg: rgb(from var(--accent) r g b); --button-hover-bg: rgb(from var(--button-bg) r g b / 0.8); --button-active-bg: rgb(from var(--button-bg) r g b / 0.65); --button-text-color: var(--default); --button-font-size: var(--text-md); --tab-bg-color: var(--segment); } .dark, [data-theme="dark"] { --scrollbar-track: transparent; --scrollbar-gutter: auto; --scrollbar-width: thin; --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); --accent: #a0cfff; --default: #27272a; --default-foreground: var(--snow); --field-background: #18181b; --field-foreground: var(--foreground); --warning: #f7b750; --warning-foreground: var(--eclipse); --danger: #db3b3e; --danger-foreground: var(--snow); --segment: #46464c; --segment-foreground: var(--foreground); --border: #dedee0; --separator: #212124; --focus: var(--accent); --link: var(--foreground); --backdrop: #0009; --surface-shadow: 0 0 0 0 transparent inset; --overlay-shadow: 0 0 1px 0 #ffffff4d inset; --field-shadow: 0 0 0 0 transparent inset; --surface-hover: var(--surface); --button-border-color: var(--border); --button-border-size: 1px; --button-bg: rgb(from var(--accent) r g b); --button-hover-bg: rgb(from var(--button-bg) r g b / 0.8); --button-active-bg: rgb(from var(--button-bg) r g b / 0.65); --button-text-color: var(--default); --button-font-size: var(--text-md); --tab-bg-color: var(--snow); } .btn { box-sizing: border-box; } .btn::before, .btn::after { box-sizing: border-box; } .btn { font-family: Arial, Helvetica, sans-serif; margin: 0; margin-right: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 4); } @media (min-width: 900px) { .btn:last-child { margin-right: 0; } } .btn { text-align: center; vertical-align: middle; font-size: var(--button-font-size); text-decoration: none; color: var(--button-text-color); isolation: isolate; min-height: calc(var(--spacing) * 16.5); transform-origin: 50%; justify-content: center; align-items: center; gap: calc(var(--spacing) * 3); border: solid var(--button-border-size) rgba(0, 0, 0, 0); border-radius: calc(var(--radius) * 3); width: -moz-fit-content; width: fit-content; padding-inline: calc(var(--spacing) * 4); line-height: normal; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline-style: none; display: inline-flex; position: relative; cursor: pointer; background: #4c8ac8; background: var(--button-bg); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; } .btn:hover:not(.btn--disabled) { background: var(--button-hover-bg); } .btn:active:not(.btn--disabled) { background: var(--button-active-bg); transform: scale(0.98); } .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .btn img, .btn .btn__icon { width: 1.25em; height: 1.25em; flex-shrink: 0; filter: invert(100%) saturate(1352%) brightness(119%) contrast(119%); } .btn--xsmall { --button-font-size: var(--text-xs); min-height: calc(var(--spacing) * 11); padding-inline: calc(var(--spacing) * 2.5); } .btn--small { --button-font-size: var(--text-sm); min-height: calc(var(--spacing) * 13); padding-inline: calc(var(--spacing) * 3); } .btn--large { --button-font-size: var(--text-lg); min-height: calc(var(--spacing) * 22); padding-inline: calc(var(--spacing) * 6); } .btn--full { width: 100%; } .btn--secondary { --button-bg: color-mix(in srgb, var(--default) 85%, var(--accent)); --button-hover-bg: color-mix(in srgb, var(--default) 85%, transparent); --button-active-bg: color-mix(in srgb, var(--default) 70%, transparent); --button-text-color: var(--default-foreground); } .btn--outline { --button-bg: transparent; --button-hover-bg: transparent; --button-active-bg: transparent; --button-text-color: var(--default-foreground); border-color: var(--button-border-color); } .btn--outline:hover:not(.btn--disabled) { border-color: var(--accent); color: var(--accent); } .btn--outline:active:not(.btn--disabled) { opacity: 0.7; } .btn--text { --button-bg: transparent; --button-hover-bg: transparent; --button-active-bg: transparent; --button-text-color: var(--default-foreground); border-color: rgba(0, 0, 0, 0); } .btn--text:hover:not(.btn--disabled) { text-decoration: underline; } .btn--alert { --button-bg: var(--danger); --button-hover-bg: color-mix(in srgb, var(--danger) 85%, #000); --button-active-bg: color-mix(in srgb, var(--danger) 70%, #000); --button-text-color: var(--danger-foreground); } .btn--disabled { opacity: var(--disabled-opacity); cursor: not-allowed; pointer-events: none; } /*# sourceMappingURL=button.css.map */