@kahi-ui/framework/dist/kahi-ui.framework.css

Straight-forward Svelte UI for the Web

/*!
* @kahi-ui/framework v0.6.4
*
* https://github.com/novacbn/kahi-ui.git
*/
*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}
:root {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}
:-moz-focusring {
  outline: 1px dotted ButtonText;
}
:-moz-ui-invalid {
  box-shadow: none;
}
::moz-focus-inner {
  border-style: none;
  padding: 0;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
body {
  margin: 0;
  font-family: inherit;
  line-height: inherit;
}
html {
  -webkit-text-size-adjust: 100%;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b,
strong {
  font-weight: bolder;
}
button {
  text-transform: none;
  background-color: transparent;
  background-image: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}
button,
[role=button] {
  cursor: pointer;
}
figure,
hr,
blockquote,
pre,
h6,
h5,
h4,
h3,
h2,
h1,
p {
  margin: 0;
}
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
h6,
h5,
h4,
h3,
h2,
h1 {
  font-size: inherit;
  font-weight: inherit;
}
input,
button,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  padding: 0;
  line-height: inherit;
  color: inherit;
}
img {
  border-style: solid;
  max-width: 100%;
  height: auto;
}
input::placeholder {
  opacity: 1;
  color: #a1a1aa;
}
img,
svg {
  display: block;
  vertical-align: middle;
}
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
pre,
code,
kbd,
samp {
  font-size: 1em;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
}
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;
}
textarea {
  resize: vertical;
}
textarea::placeholder {
  opacity: 1;
  color: #a1a1aa;
}
audio,
canvas,
embed,
img,
object,
svg,
video {
  user-select: none;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
}
img,
video {
  height: auto;
  max-width: 100%;
}
:root {
  --palette-background-lightest: var(--palettes-auto-background-lightest);
  --palette-background-lighter: var(--palettes-auto-background-lighter);
  --palette-background-light: var(--palettes-auto-background-light);
  --palette-background-normal: var(--palettes-auto-background-normal);
  --palette-background-bold: var(--palettes-auto-background-bold);
  --palette-background-bolder: var(--palettes-auto-background-bolder);
  --palette-background-boldest: var(--palettes-auto-background-boldest);
  --palette-foreground-lightest: var(--palettes-auto-foreground-lightest);
  --palette-foreground-lighter: var(--palettes-auto-foreground-lighter);
  --palette-foreground-light: var(--palettes-auto-foreground-light);
  --palette-foreground-normal: var(--palettes-auto-foreground-normal);
  --palette-foreground-bold: var(--palettes-auto-foreground-bold);
  --palette-foreground-bolder: var(--palettes-auto-foreground-bolder);
  --palette-foreground-boldest: var(--palettes-auto-foreground-boldest);
  background-color: hsla(var(--palette-background-lighter), var(--document-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--document-font-opacity));
  font-family: var(--document-font-family);
  line-height: var(--document-font-line-height);
  font-size: var(--document-font-size);
  transition: background-color var(--animations-visual-duration) var(--animations-visual-function), color var(--animations-visual-duration) var(--animations-visual-function);
}
::selection {
  background-color: hsla(var(--palette-foreground-lighter), var(--document-background-opacity));
  color: hsla(var(--palette-background-normal), var(--document-font-opacity));
}
* {
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: var(--document-scrollbar-standard-size);
  scrollbar-color: hsla(var(--palettes-dark-background-lightest), var(--document-scrollbar-thumb-background-opacity)) hsla(var(--palettes-auto-background-boldest), var(--document-scrollbar-track-background-opacity));
  transition: scrollbar-color var(--animations-visual-duration) var(--animations-visual-function);
}
::-webkit-scrollbar {
  width: calc(var(--document-scrollbar-webkit-size) + (var(--document-scrollbar-track-padding) * 1rem));
  height: calc(var(--document-scrollbar-webkit-size) + (var(--document-scrollbar-track-padding) * 1rem));
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: calc(var(--document-scrollbar-track-padding) * 1rem) solid rgba(255, 255, 255, 0);
  transition: background-color var(--animations-visual-duration) var(--animations-visual-function);
}
::-webkit-scrollbar-track {
  background-color: hsla(var(--palettes-auto-background-boldest), var(--document-scrollbar-track-background-opacity));
}
::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: hsla(var(--palettes-dark-background-lightest), var(--document-scrollbar-thumb-background-opacity));
}
.blockquote,
:where(.article) > blockquote {
  --palette-background-lightest: var(--palettes-neutral-background-lightest);
  --palette-background-lighter: var(--palettes-neutral-background-lighter);
  --palette-background-light: var(--palettes-neutral-background-light);
  --palette-background-normal: var(--palettes-neutral-background-normal);
  --palette-background-bold: var(--palettes-neutral-background-bold);
  --palette-background-bolder: var(--palettes-neutral-background-bolder);
  --palette-background-boldest: var(--palettes-neutral-background-boldest);
  --palette-foreground-lightest: var(--palettes-neutral-foreground-lightest);
  --palette-foreground-lighter: var(--palettes-neutral-foreground-lighter);
  --palette-foreground-light: var(--palettes-neutral-foreground-light);
  --palette-foreground-normal: var(--palettes-neutral-foreground-normal);
  --palette-foreground-bold: var(--palettes-neutral-foreground-bold);
  --palette-foreground-bolder: var(--palettes-neutral-foreground-bolder);
  --palette-foreground-boldest: var(--palettes-neutral-foreground-boldest);
  position: relative;
  padding: calc(var(--blockquote-padding-y) * 1em) calc(var(--blockquote-padding-x) * 1em);
  background-color: hsla(var(--palette-background-bolder), var(--blockquote-background-opacity));
  border-left: var(--blockquote-border-width) var(--blockquote-border-style) hsla(var(--palette-background-bolder), var(--blockquote-border-opacity));
  border-radius: calc(var(--blockquote-border-radius) * 1em);
  transition: background-color var(--animations-visual-duration) var(--animations-visual-function), border-color var(--animations-visual-duration) var(--animations-visual-function);
}
:where(.article) > blockquote:not(:last-child) {
  margin-bottom: calc(var(--blockquote-article-margin-y) * 1rem);
}
:where(.article) > blockquote > :not(:last-child) {
  margin-bottom: calc(var(--blockquote-article-children-margin-y) * 1rem);
}
.code,
:where(.article) > :is(code, pre),
:where(.article) > :is(blockquote, p, ol, ul, table) code,
:where(.article) > .scrollable > table code {
  --palette-background-lightest: var(--palettes-auto-foreground-lightest);
  --palette-background-lighter: var(--palettes-auto-foreground-lighter);
  --palette-background-light: var(--palettes-auto-foreground-light);
  --palette-background-normal: var(--palettes-auto-foreground-normal);
  --palette-background-bold: var(--palettes-auto-foreground-bold);
  --palette-background-bolder: var(--palettes-auto-foreground-bolder);
  --palette-background-boldest: var(--palettes-auto-foreground-boldest);
  --palette-foreground-lightest: var(--palettes-auto-background-lightest);
  --palette-foreground-lighter: var(--palettes-auto-background-lighter);
  --palette-foreground-light: var(--palettes-auto-background-light);
  --palette-foreground-normal: var(--palettes-auto-background-normal);
  --palette-foreground-bold: var(--palettes-auto-background-bold);
  --palette-foreground-bolder: var(--palettes-auto-background-bolder);
  --palette-foreground-boldest: var(--palettes-auto-background-boldest);
  position: relative;
  background-color: hsla(var(--palette-background-bolder), var(--code-background-opacity));
  font-family: var(--code-font-family);
  border-radius: calc(var(--code-border-radius) * 1em);
  vertical-align: middle;
  transition: background-color var(--animations-visual-duration) var(--animations-visual-function), border-color var(--animations-visual-duration) var(--animations-visual-function);
}
code.code,
:where(.article) > code,
:where(.article) > :is(blockquote, p, ol, ul, table) code,
:where(.article) > .scrollable > table code {
  padding: calc(var(--code-code-padding-y) * 1em) calc(var(--code-code-padding-x) * 1em);
  font-size: calc(var(--code-font-size) * 1em);
  overflow-wrap: break-word;
}
pre.code,
:where(.article) > pre {
  padding: calc(var(--code-pre-padding-y) * 1em) calc(var(--code-pre-padding-x) * 1em);
  overflow-x: auto;
}
pre.code > code,
:where(.article) > pre > code {
  white-space: pre;
}
:where(.article) > pre:not(:last-child) {
  margin-bottom: calc(var(--code-article-margin-y) * 1rem);
}
.heading,
:where(.article) > :is(h1, h2, h3, h4, h5, h6) {
  --alignment-text: initial;
  --transform-text: inherit;
  color: currentColor;
  font-family: var(--heading-font-family);
  text-align: var(--alignment-text);
  text-transform: var(--transform-text);
  transition: color var(--animations-visual-duration) var(--animations-visual-function);
}
.heading[data-palette],
:where(.article) > :is(h1, h2, h3, h4, h5, h6)[data-palette] {
  color: hsla(var(--palette-background-boldest), var(--text-font-opacity));
}
.heading[data-variation~=truncate],
:where(.article) > :is(h1, h2, h3, h4, h5, h6)[data-variation~=truncate] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
h1.heading,
:where(.article) > h1 {
  line-height: var(--heading-inline-h1-font-line-height);
  font-size: calc(var(--heading-inline-h1-font-size) * 1rem);
  font-weight: var(--heading-inline-h1-font-weight);
}
h1.heading[data-variation~=block],
:where(.article) > h1[data-variation~=block] {
  line-height: var(--heading-block-h1-font-line-height);
  font-size: calc(var(--heading-block-h1-font-size) * 1rem);
  font-weight: var(--heading-block-h1-font-weight);
}
h2.heading,
:where(.article) > h2 {
  line-height: var(--heading-inline-h2-font-line-height);
  font-size: calc(var(--heading-inline-h2-font-size) * 1rem);
  font-weight: var(--heading-inline-h2-font-weight);
}
h2.heading[data-variation~=block],
:where(.article) > h2[data-variation~=block] {
  line-height: var(--heading-block-h2-font-line-height);
  font-size: calc(var(--heading-block-h2-font-size) * 1rem);
  font-weight: var(--heading-block-h2-font-weight);
}
h3.heading,
:where(.article) > h3 {
  line-height: var(--heading-inline-h3-font-line-height);
  font-size: calc(var(--heading-inline-h3-font-size) * 1rem);
  font-weight: var(--heading-inline-h3-font-weight);
}
h3.heading[data-variation~=block],
:where(.article) > h3[data-variation~=block] {
  line-height: var(--heading-block-h3-font-line-height);
  font-size: calc(var(--heading-block-h3-font-size) * 1rem);
  font-weight: var(--heading-block-h3-font-weight);
}
h4.heading,
:where(.article) > h4 {
  line-height: var(--heading-inline-h4-font-line-height);
  font-size: calc(var(--heading-inline-h4-font-size) * 1rem);
  font-weight: var(--heading-inline-h4-font-weight);
}
h4.heading[data-variation~=block],
:where(.article) > h4[data-variation~=block] {
  line-height: var(--heading-block-h4-font-line-height);
  font-size: calc(var(--heading-block-h4-font-size) * 1rem);
  font-weight: var(--heading-block-h4-font-weight);
}
h5.heading,
:where(.article) > h5 {
  line-height: var(--heading-inline-h5-font-line-height);
  font-size: calc(var(--heading-inline-h5-font-size) * 1rem);
  font-weight: var(--heading-inline-h5-font-weight);
}
h5.heading[data-variation~=block],
:where(.article) > h5[data-variation~=block] {
  line-height: var(--heading-block-h5-font-line-height);
  font-size: calc(var(--heading-block-h5-font-size) * 1rem);
  font-weight: var(--heading-block-h5-font-weight);
}
h6.heading,
:where(.article) > h6 {
  line-height: var(--heading-inline-h6-font-line-height);
  font-size: calc(var(--heading-inline-h6-font-size) * 1rem);
  font-weight: var(--heading-inline-h6-font-weight);
}
h6.heading[data-variation~=block],
:where(.article) > h6[data-variation~=block] {
  line-height: var(--heading-block-h6-font-line-height);
  font-size: calc(var(--heading-block-h6-font-size) * 1rem);
  font-weight: var(--heading-block-h6-font-weight);
}
:where(.article) > :is(h1, h2, h3, h4, h5, h6):not(:last-child) {
  margin-bottom: calc(var(--heading-article-margin-y) * 1em);
}
:where(.article) > :not(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: calc(var(--heading-article-margin-y) * 1em);
}
.text,
:where(.article) > p {
  --alignment-text: initial;
  --sizing-font-size-inline: 1;
  --transform-text: inherit;
  color: currentColor;
  text-align: var(--alignment-text);
  text-transform: var(--transform-text);
  font-size: calc(var(--sizing-font-size-inline) * 1em);
  transition: color var(--animations-visual-duration) var(--animations-visual-function), opacity var(--animations-visual-duration) var(--animations-visual-function);
}
.text[data-palette],
:where(.article) > p[data-palette] {
  color: hsla(var(--palette-background-boldest), var(--text-font-opacity));
}
.text[data-variation~=block],
:where(.article) > p[data-variation~=block] {
  font-size: calc(var(--sizing-font-size-block) * 1em);
}
.text[data-variation~=truncate],
:where(.article) > p[data-variation~=truncate] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
small.text,
:where(.article) > small,
:where(.article) > :is(blockquote, p, ol, ul, table) small,
:where(.article) > .scrollable > table small {
  font-size: calc(var(--text-small-font-size) * 1em);
  opacity: var(--text-small-opacity);
}
:where(.article) > p:not(:last-child) {
  margin-bottom: calc(var(--text-article-margin-y) * 1em);
}
.button {
  --palette-background-lightest: var(--palettes-neutral-background-lightest);
  --palette-background-lighter: var(--palettes-neutral-background-lighter);
  --palette-background-light: var(--palettes-neutral-background-light);
  --palette-background-normal: var(--palettes-neutral-background-normal);
  --palette-background-bold: var(--palettes-neutral-background-bold);
  --palette-background-bolder: var(--palettes-neutral-background-bolder);
  --palette-background-boldest: var(--palettes-neutral-background-boldest);
  --palette-foreground-lightest: var(--palettes-neutral-foreground-lightest);
  --palette-foreground-lighter: var(--palettes-neutral-foreground-lighter);
  --palette-foreground-light: var(--palettes-neutral-foreground-light);
  --palette-foreground-normal: var(--palettes-neutral-foreground-normal);
  --palette-foreground-bold: var(--palettes-neutral-foreground-bold);
  --palette-foreground-bolder: var(--palettes-neutral-foreground-bolder);
  --palette-foreground-boldest: var(--palettes-neutral-foreground-boldest);
  --shape-radius: var(--button-border-radius);
  --sizing-font-size-inline: var(--button-font-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: calc(var(--button-gap-y) * 1em) calc(var(--button-gap-x) * 1em);
  padding: calc(var(--button-padding-y) * 1em) calc(var(--button-padding-x) * 1em);
  outline: none !important;
  line-height: 1;
  font-size: calc(var(--sizing-font-size-inline) * 1rem);
  font-weight: var(--button-font-weight);
  text-decoration: none !important;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  border-color: transparent;
  border-style: var(--button-border-style);
  border-width: var(--button-border-width);
  border-radius: calc(var(--shape-radius) * 1rem);
  transition:
    background-color var(--animations-visual-duration) var(--animations-visual-function),
    opacity var(--animations-visual-duration) var(--animations-visual-function),
    color var(--animations-visual-duration) var(--animations-visual-function),
    transform var(--animations-movement-duration) var(--animations-movement-function),
    border-color var(--animations-visual-duration) var(--animations-visual-function);
}
.button:is(:disabled, [aria-disabled=true]) {
  cursor: not-allowed;
  opacity: var(--button-disabled-opacity);
}
.button:not([data-variation~=subtle]) {
  transform: scale(1);
}
.button:not([data-variation~=subtle]):not(:disabled, [aria-disabled=true]):is(:active, [aria-current], [aria-pressed=true]) {
  transform: scale(var(--button-loud-active-scale-x), var(--button-loud-active-scale-y));
}
.button[data-variation~=subtle]:not([data-palette]) {
  --palette-background-lightest: inherit;
  --palette-background-lighter: inherit;
  --palette-background-light: inherit;
  --palette-background-normal: inherit;
  --palette-background-bold: inherit;
  --palette-background-bolder: inherit;
  --palette-background-boldest: inherit;
  --palette-foreground-lightest: inherit;
  --palette-foreground-lighter: inherit;
  --palette-foreground-light: inherit;
  --palette-foreground-normal: inherit;
  --palette-foreground-bold: inherit;
  --palette-foreground-bolder: inherit;
  --palette-foreground-boldest: inherit;
}
.button:not([data-variation~=clear], [data-variation~=outline]) {
  background-color: hsla(var(--palette-background-bolder), var(--button-block-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--button-block-font-opacity));
}
.button:not([data-variation~=clear], [data-variation~=outline])[data-variation~=subtle]:not([data-palette]) {
  background-color: hsla(var(--palette-foreground-bolder), var(--button-block-background-opacity));
  color: hsla(var(--palette-background-normal), var(--button-block-font-opacity));
}
.button:not([data-variation~=clear], [data-variation~=outline]):not(:disabled, [aria-disabled=true]):is(:focus, :hover) {
  background-color: hsla(var(--palette-background-normal), var(--button-block-focus-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--button-block-focus-font-opacity));
}
.button:not([data-variation~=clear], [data-variation~=outline]):not(:disabled, [aria-disabled=true]):is(:focus, :hover)[data-variation~=subtle]:not([data-palette]) {
  background-color: hsla(var(--palette-foreground-normal), var(--button-block-focus-background-opacity));
  color: hsla(var(--palette-background-normal), var(--button-block-focus-font-opacity));
}
.button:not([data-variation~=clear], [data-variation~=outline]):not(:disabled, [aria-disabled=true]):is(:active, [aria-current], [aria-pressed=true]) {
  background-color: hsla(var(--palette-background-lightest), var(--button-block-active-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--button-block-active-font-opacity));
}
.button:not([data-variation~=clear], [data-variation~=outline]):not(:disabled, [aria-disabled=true]):is(:active, [aria-current], [aria-pressed=true])[data-variation~=subtle]:not([data-palette]) {
  background-color: hsla(var(--palette-foreground-lightest), var(--button-block-active-background-opacity));
  color: hsla(var(--palette-background-normal), var(--button-block-active-font-opacity));
}
.button[data-variation~=clear] {
  background-color: hsla(var(--palette-background-lightest), var(--button-clear-background-opacity));
  color: hsla(var(--palette-background-normal), var(--button-clear-font-opacity));
}
.button[data-variation~=clear][data-variation~=subtle]:not([data-palette]) {
  background-color: hsla(var(--palette-foreground-lightest), var(--button-clear-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--button-clear-font-opacity));
}
.button[data-variation~=clear]:not(:disabled, [aria-disabled=true]):is(:focus, :hover) {
  background-color: hsla(var(--palette-background-lightest), var(--button-clear-focus-background-opacity));
  color: hsla(var(--palette-background-normal), var(--button-clear-focus-font-opacity));
}
.button[data-variation~=clear]:not(:disabled, [aria-disabled=true]):is(:focus, :hover)[data-variation~=subtle]:not([data-palette]) {
  background-color: hsla(var(--palette-foreground-lightest), var(--button-clear-focus-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--button-clear-focus-font-opacity));
}
.button[data-variation~=clear]:not(:disabled, [aria-disabled=true]):is(:active, [aria-current], [aria-pressed=true]) {
  background-color: hsla(var(--palette-background-lightest), var(--button-clear-active-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--button-clear-active-font-opacity));
}
.button[data-variation~=clear]:not(:disabled, [aria-disabled=true]):is(:active, [aria-current], [aria-pressed=true])[data-variation~=subtle]:not([data-palette]) {
  background-color: hsla(var(--palette-foreground-lightest), var(--button-clear-active-background-opacity));
  color: hsla(var(--palette-background-normal), var(--button-clear-active-font-opacity));
}
.button[data-variation~=outline] {
  border-color: hsla(var(--palette-background-lightest), var(--button-outline-border-opacity));
  background-color: hsla(var(--palette-background-lightest), var(--button-outline-background-opacity));
  color: hsla(var(--palette-background-normal), var(--button-outline-font-opacity));
}
.button[data-variation~=outline][data-variation~=subtle]:not([data-palette]) {
  border-color: hsla(var(--palette-foreground-lightest), var(--button-outline-border-opacity));
  background-color: hsla(var(--palette-foreground-lightest), var(--button-outline-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--button-outline-font-opacity));
}
.button[data-variation~=outline]:not(:disabled, [aria-disabled=true]):is(:focus, :hover) {
  border-color: hsla(var(--palette-background-lightest), var(--button-outline-focus-border-opacity));
  background-color: hsla(var(--palette-background-lightest), var(--button-outline-focus-background-opacity));
  color: hsla(var(--palette-background-normal), var(--button-outline-focus-font-opacity));
}
.button[data-variation~=outline]:not(:disabled, [aria-disabled=true]):is(:focus, :hover)[data-variation~=subtle]:not([data-palette]) {
  border-color: hsla(var(--palette-foreground-lightest), var(--button-outline-focus-border-opacity));
  background-color: hsla(var(--palette-foreground-lightest), var(--button-outline-focus-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--button-outline-focus-font-opacity));
}
.button[data-variation~=outline]:not(:disabled, [aria-disabled=true]):is(:active, [aria-current], [aria-pressed=true]) {
  border-color: hsla(var(--palette-background-lightest), var(--button-outline-active-border-opacity));
  background-color: hsla(var(--palette-background-lightest), var(--button-outline-active-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--button-outline-active-font-opacity));
}
.button[data-variation~=outline]:not(:disabled, [aria-disabled=true]):is(:active, [aria-current], [aria-pressed=true])[data-variation~=subtle]:not([data-palette]) {
  border-color: hsla(var(--palette-foreground-lightest), var(--button-outline-active-border-opacity));
  background-color: hsla(var(--palette-foreground-lightest), var(--button-outline-active-background-opacity));
  color: hsla(var(--palette-background-normal), var(--button-outline-active-font-opacity));
}
.check {
  --palette-background-lightest: var(--palettes-neutral-background-lightest);
  --palette-background-lighter: var(--palettes-neutral-background-lighter);
  --palette-background-light: var(--palettes-neutral-background-light);
  --palette-background-normal: var(--palettes-neutral-background-normal);
  --palette-background-bold: var(--palettes-neutral-background-bold);
  --palette-background-bolder: var(--palettes-neutral-background-bolder);
  --palette-background-boldest: var(--palettes-neutral-background-boldest);
  --palette-foreground-lightest: var(--palettes-neutral-foreground-lightest);
  --palette-foreground-lighter: var(--palettes-neutral-foreground-lighter);
  --palette-foreground-light: var(--palettes-neutral-foreground-light);
  --palette-foreground-normal: var(--palettes-neutral-foreground-normal);
  --palette-foreground-bold: var(--palettes-neutral-foreground-bold);
  --palette-foreground-bolder: var(--palettes-neutral-foreground-bolder);
  --palette-foreground-boldest: var(--palettes-neutral-foreground-boldest);
  --sizing-font-size-inline: var(--check-font-size);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: calc(var(--check-padding-y) * 1em) calc(var(--check-padding-x) * 1em);
  outline: none !important;
  font-size: calc(var(--sizing-font-size-inline) * 1rem);
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  transform: scale(1);
  transition:
    background-color var(--animations-visual-duration) var(--animations-visual-function),
    opacity var(--animations-visual-duration) var(--animations-visual-function),
    color var(--animations-visual-duration) var(--animations-visual-function),
    transform var(--animations-movement-duration) var(--animations-movement-function);
  border-radius: calc(var(--check-border-radius) * 1rem);
}
.check:disabled {
  cursor: not-allowed;
  opacity: var(--check-disabled-opacity);
}
.check:is(:enabled:active, [aria-pressed=true]) {
  transform: scale(var(--check-active-scale-x), var(--check-active-scale-y));
}
.check::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: currentColor;
  border-radius: 12.5%;
  transform: scale(0);
  transition: transform var(--animations-movement-duration) var(--animations-movement-function);
}
.check:enabled:is(:active, :focus, :hover)::before,
.check:is(:checked, [aria-pressed=true])::before {
  transform: scale(1);
}
.check:is(:not([data-variation]), [data-variation~=block]):not(:checked) {
  background-color: hsla(var(--palette-background-bolder), var(--check-block-unchecked-background-opacity));
  color: hsla(var(--palette-background-bolder), var(--check-block-unchecked-font-opacity));
}
.check:is(:not([data-variation]), [data-variation~=block]):not(:checked):enabled:is(:focus, :hover) {
  background-color: hsla(var(--palette-background-bolder), var(--check-block-unchecked-focus-background-opacity));
  color: hsla(var(--palette-background-bolder), var(--check-block-unchecked-focus-font-opacity));
}
.check:is(:not([data-variation]), [data-variation~=block]):not(:checked):is(:enabled:active, [aria-pressed=true]) {
  background-color: hsla(var(--palette-background-bolder), var(--check-block-unchecked-active-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--check-block-unchecked-active-font-opacity));
}
.check:is(:not([data-variation]), [data-variation~=block]):checked {
  background-color: hsla(var(--palette-background-bolder), var(--check-block-checked-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--check-block-checked-font-opacity));
}
.check:is(:not([data-variation]), [data-variation~=block]):checked:enabled:is(:focus, :hover) {
  background-color: hsla(var(--palette-background-bolder), var(--check-block-checked-focus-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--check-block-checked-focus-font-opacity));
}
.check:is(:not([data-variation]), [data-variation~=block]):checked:is(:enabled:active, [aria-pressed=true]) {
  background-color: hsla(var(--palette-background-bolder), var(--check-block-checked-active-background-opacity));
  color: hsla(var(--palette-background-bolder), var(--check-block-checked-active-font-opacity));
}
.check[data-variation~=flush]:not(:checked) {
  color: hsla(var(--palette-background-bolder), var(--check-flush-unchecked-font-opacity));
}
.check[data-variation~=flush]:not(:checked):enabled:is(:focus, :hover) {
  color: hsla(var(--palette-background-bolder), var(--check-flush-unchecked-focus-font-opacity));
}
.check[data-variation~=flush]:not(:checked):is(:enabled:active, [aria-pressed=true]) {
  color: hsla(var(--palette-background-bolder), var(--check-flush-unchecked-active-font-opacity));
}
.check[data-variation~=flush]:checked {
  color: hsla(var(--palette-background-bolder), var(--check-flush-checked-font-opacity));
}
.check[data-variation~=flush]:checked:enabled:is(:focus, :hover) {
  color: hsla(var(--palette-background-bolder), var(--check-flush-checked-focus-font-opacity));
}
.check[data-variation~=flush]:checked:is(:enabled:active, [aria-pressed=true]) {
  color: hsla(var(--palette-background-bolder), var(--check-flush-checked-active-font-opacity));
}
.file-drop-input {
  --palette-background-lightest: var(--palettes-neutral-background-lightest);
  --palette-background-lighter: var(--palettes-neutral-background-lighter);
  --palette-background-light: var(--palettes-neutral-background-light);
  --palette-background-normal: var(--palettes-neutral-background-normal);
  --palette-background-bold: var(--palettes-neutral-background-bold);
  --palette-background-bolder: var(--palettes-neutral-background-bolder);
  --palette-background-boldest: var(--palettes-neutral-background-boldest);
  --palette-foreground-lightest: var(--palettes-neutral-foreground-lightest);
  --palette-foreground-lighter: var(--palettes-neutral-foreground-lighter);
  --palette-foreground-light: var(--palettes-neutral-foreground-light);
  --palette-foreground-normal: var(--palettes-neutral-foreground-normal);
  --palette-foreground-bold: var(--palettes-neutral-foreground-bold);
  --palette-foreground-bolder: var(--palettes-neutral-foreground-bolder);
  --palette-foreground-boldest: var(--palettes-neutral-foreground-boldest);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: calc(var(--file-drop-input-padding-y) * 1rem) calc(var(--file-drop-input-padding-x) * 1rem);
  background-color: hsla(var(--palette-background-lightest), var(--file-drop-input-background-opacity));
  border: var(--file-drop-input-border-width) var(--file-drop-input-border-style) hsla(var(--palette-background-bolder), var(--file-drop-input-border-opacity));
  color: hsla(var(--palette-background-bolder), var(--file-drop-input-font-opacity));
  line-height: 1;
  text-align: center;
  transition:
    background-color var(--animations-visual-duration) var(--animations-visual-function),
    border-color var(--animations-visual-duration) var(--animations-visual-function),
    color var(--animations-visual-duration) var(--animations-visual-function);
}
.file-drop-input--input,
.file-drop-input--input::file-selector-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.number-input {
  --alignment-text: initial;
  --palette-background-lightest: var(--palettes-neutral-background-lightest);
  --palette-background-lighter: var(--palettes-neutral-background-lighter);
  --palette-background-light: var(--palettes-neutral-background-light);
  --palette-background-normal: var(--palettes-neutral-background-normal);
  --palette-background-bold: var(--palettes-neutral-background-bold);
  --palette-background-bolder: var(--palettes-neutral-background-bolder);
  --palette-background-boldest: var(--palettes-neutral-background-boldest);
  --palette-foreground-lightest: var(--palettes-neutral-foreground-lightest);
  --palette-foreground-lighter: var(--palettes-neutral-foreground-lighter);
  --palette-foreground-light: var(--palettes-neutral-foreground-light);
  --palette-foreground-normal: var(--palettes-neutral-foreground-normal);
  --palette-foreground-bold: var(--palettes-neutral-foreground-bold);
  --palette-foreground-bolder: var(--palettes-neutral-foreground-bolder);
  --palette-foreground-boldest: var(--palettes-neutral-foreground-boldest);
  --shape-radius: var(--number-input-border-radius);
  --sizing-font-size-inline: var(--number-input-font-size);
  --transform-text: inherit;
  appearance: none;
  position: relative;
  padding: calc(var(--number-input-padding-y) * 1em) calc(var(--number-input-padding-x) * 1em);
  outline: none !important;
  background: transparent;
  border-radius: calc(var(--shape-radius) * 1rem);
  border-style: var(--number-input-border-style);
  border-width: var(--number-input-border-width);
  font-size: calc(var(--sizing-font-size-inline) * 1rem);
  text-align: var(--alignment-text);
  text-transform: var(--transform-text);
  vertical-align: middle;
  transition:
    border-color var(--animations-visual-duration) var(--animations-visual-function),
    background-color var(--animations-visual-duration) var(--animations-visual-function),
    opacity var(--animations-visual-duration) var(--animations-visual-function),
    color var(--animations-visual-duration) var(--animations-visual-function);
}
.number-input:disabled {
  cursor: not-allowed;
  opacity: var(--number-input-disabled-opacity);
}
.number-input::placeholder {
  color: currentColor;
  opacity: var(--number-input-placeholder-opacity);
}
.number-input:not([data-variation]) {
  border-color: hsla(var(--palette-background-bolder), var(--number-input-outline-border-opacity));
}
.number-input:not([data-variation]):enabled:hover {
  border-color: hsla(var(--palette-background-bolder), var(--number-input-outline-hover-border-opacity));
}
.number-input:not([data-variation]):enabled:is(:active, :focus) {
  border-color: hsla(var(--palette-background-bolder), var(--number-input-outline-active-border-opacity));
}
.number-input[data-variation=block] {
  border-color: hsla(var(--palette-background-bolder), var(--number-input-block-border-opacity));
  background-color: hsla(var(--palette-background-bolder), var(--number-input-block-background-opacity));
}
.number-input[data-variation=block]:enabled:hover {
  border-color: hsla(var(--palette-background-bolder), var(--number-input-block-hover-border-opacity));
  background-color: hsla(var(--palette-background-bolder), var(--number-input-block-hover-background-opacity));
}
.number-input[data-variation=block]:enabled:is(:active, :focus) {
  border-color: hsla(var(--palette-background-bolder), var(--number-input-block-active-border-opacity));
  background-color: hsla(var(--palette-background-bolder), var(--number-input-block-active-background-opacity));
}
.number-input[data-variation=flush] {
  padding: 0;
  border: none;
  border-radius: none;
  font-size: inherit;
  line-height: inherit;
  text-align: inherit;
  text-transform: inherit;
  vertical-align: top;
}
.number-input[data-variation=flush][data-palette] {
  color: hsla(var(--palette-background-boldest), var(--number-input-flush-font-opacity));
}
.number-input[data-variation=flush]:enabled:is(:active, :hover, :focus) {
  text-decoration: underline;
}
.number-input:not([cols], [size]) {
  width: 100%;
}
.radio {
  --palette-background-lightest: var(--palettes-neutral-background-lightest);
  --palette-background-lighter: var(--palettes-neutral-background-lighter);
  --palette-background-light: var(--palettes-neutral-background-light);
  --palette-background-normal: var(--palettes-neutral-background-normal);
  --palette-background-bold: var(--palettes-neutral-background-bold);
  --palette-background-bolder: var(--palettes-neutral-background-bolder);
  --palette-background-boldest: var(--palettes-neutral-background-boldest);
  --palette-foreground-lightest: var(--palettes-neutral-foreground-lightest);
  --palette-foreground-lighter: var(--palettes-neutral-foreground-lighter);
  --palette-foreground-light: var(--palettes-neutral-foreground-light);
  --palette-foreground-normal: var(--palettes-neutral-foreground-normal);
  --palette-foreground-bold: var(--palettes-neutral-foreground-bold);
  --palette-foreground-bolder: var(--palettes-neutral-foreground-bolder);
  --palette-foreground-boldest: var(--palettes-neutral-foreground-boldest);
  --sizing-font-size-inline: var(--radio-font-size);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: calc(var(--radio-padding-y) * 1em) calc(var(--radio-padding-x) * 1em);
  outline: none !important;
  font-size: calc(var(--sizing-font-size-inline) * 1rem);
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  transform: scale(1);
  transition:
    background-color var(--animations-visual-duration) var(--animations-visual-function),
    opacity var(--animations-visual-duration) var(--animations-visual-function),
    color var(--animations-visual-duration) var(--animations-visual-function),
    transform var(--animations-movement-duration) var(--animations-movement-function);
  border-radius: 100%;
}
.radio:disabled {
  cursor: not-allowed;
  opacity: var(--radio-disabled-opacity);
}
.radio:is(:enabled:active, [aria-pressed=true]) {
  transform: scale(var(--radio-active-scale-x), var(--radio-active-scale-y));
}
.radio::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: currentColor;
  border-radius: inherit;
  transform: scale(0);
  transition: transform var(--animations-movement-duration) var(--animations-movement-function);
}
.radio:enabled:is(:active, :focus, :hover)::before,
.radio:is(:checked, [aria-pressed=true])::before {
  transform: scale(1);
}
.radio:is(:not([data-variation]), [data-variation~=block]):not(:checked) {
  background-color: hsla(var(--palette-background-bolder), var(--radio-block-unchecked-background-opacity));
  color: hsla(var(--palette-background-bolder), var(--radio-block-unchecked-font-opacity));
}
.radio:is(:not([data-variation]), [data-variation~=block]):not(:checked):enabled:is(:focus, :hover) {
  background-color: hsla(var(--palette-background-bolder), var(--radio-block-unchecked-focus-background-opacity));
  color: hsla(var(--palette-background-bolder), var(--radio-block-unchecked-focus-font-opacity));
}
.radio:is(:not([data-variation]), [data-variation~=block]):not(:checked):is(:enabled:active, [aria-pressed=true]) {
  background-color: hsla(var(--palette-background-bolder), var(--radio-block-unchecked-active-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--radio-block-unchecked-active-font-opacity));
}
.radio:is(:not([data-variation]), [data-variation~=block]):checked {
  background-color: hsla(var(--palette-background-bolder), var(--radio-block-checked-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--radio-block-checked-font-opacity));
}
.radio:is(:not([data-variation]), [data-variation~=block]):checked:enabled:is(:focus, :hover) {
  background-color: hsla(var(--palette-background-bolder), var(--radio-block-checked-focus-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--radio-block-checked-focus-font-opacity));
}
.radio:is(:not([data-variation]), [data-variation~=block]):checked:is(:enabled:active, [aria-pressed=true]) {
  background-color: hsla(var(--palette-background-bolder), var(--radio-block-checked-active-background-opacity));
  color: hsla(var(--palette-background-bolder), var(--radio-block-checked-active-font-opacity));
}
.radio[data-variation~=flush]:not(:checked) {
  color: hsla(var(--palette-background-bolder), var(--radio-flush-unchecked-font-opacity));
}
.radio[data-variation~=flush]:not(:checked):enabled:is(:focus, :hover) {
  color: hsla(var(--palette-background-bolder), var(--radio-flush-unchecked-focus-font-opacity));
}
.radio[data-variation~=flush]:not(:checked):is(:enabled:active, [aria-pressed=true]) {
  color: hsla(var(--palette-background-bolder), var(--radio-flush-unchecked-active-font-opacity));
}
.radio[data-variation~=flush]:checked {
  color: hsla(var(--palette-background-bolder), var(--radio-flush-checked-font-opacity));
}
.radio[data-variation~=flush]:checked:enabled:is(:focus, :hover) {
  color: hsla(var(--palette-background-bolder), var(--radio-flush-checked-focus-font-opacity));
}
.radio[data-variation~=flush]:checked:is(:enabled:active, [aria-pressed=true]) {
  color: hsla(var(--palette-background-bolder), var(--radio-flush-checked-active-font-opacity));
}
.switch {
  --palette-background-lightest: var(--palettes-neutral-background-lightest);
  --palette-background-lighter: var(--palettes-neutral-background-lighter);
  --palette-background-light: var(--palettes-neutral-background-light);
  --palette-background-normal: var(--palettes-neutral-background-normal);
  --palette-background-bold: var(--palettes-neutral-background-bold);
  --palette-background-bolder: var(--palettes-neutral-background-bolder);
  --palette-background-boldest: var(--palettes-neutral-background-boldest);
  --palette-foreground-lightest: var(--palettes-neutral-foreground-lightest);
  --palette-foreground-lighter: var(--palettes-neutral-foreground-lighter);
  --palette-foreground-light: var(--palettes-neutral-foreground-light);
  --palette-foreground-normal: var(--palettes-neutral-foreground-normal);
  --palette-foreground-bold: var(--palettes-neutral-foreground-bold);
  --palette-foreground-bolder: var(--palettes-neutral-foreground-bolder);
  --palette-foreground-boldest: var(--palettes-neutral-foreground-boldest);
  --sizing-font-size-inline: var(--switch-font-size);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: calc(var(--switch-padding-y) * 1em) calc(var(--switch-padding-x) * 1em);
  outline: none !important;
  font-size: calc(var(--sizing-font-size-inline) * 1rem);
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  transform: scale(1);
  transition:
    background-color var(--animations-visual-duration) var(--animations-visual-function),
    opacity var(--animations-visual-duration) var(--animations-visual-function),
    color var(--animations-visual-duration) var(--animations-visual-function),
    transform var(--animations-movement-duration) var(--animations-movement-function);
  border-radius: var(--shapes-pill);
}
.switch:disabled {
  cursor: not-allowed;
  opacity: var(--switch-disabled-opacity);
}
.switch:is(:enabled:active, [aria-pressed=true]) {
  transform: scale(var(--switch-active-scale-x), var(--switch-active-scale-y));
}
.switch::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: currentColor;
  border-radius: inherit;
  transform: translateX(-50%);
  transition: transform var(--animations-movement-duration) var(--animations-movement-function);
}
.switch:checked::before {
  transform: translateX(50%);
}
.switch:is(:enabled:active, [aria-pressed=true])::before {
  transform: translateX(0%);
}
.switch:not(:checked) {
  background-color: hsla(var(--palette-background-bolder), var(--switch-unchecked-background-opacity));
  color: hsla(var(--palette-background-bolder), var(--switch-unchecked-font-opacity));
}
.switch:not(:checked):enabled:is(:focus, :hover) {
  background-color: hsla(var(--palette-background-bolder), var(--switch-unchecked-focus-background-opacity));
  color: hsla(var(--palette-background-bolder), var(--switch-unchecked-focus-font-opacity));
}
.switch:not(:checked):is(:enabled:active, [aria-pressed=true]) {
  background-color: hsla(var(--palette-background-bolder), var(--switch-unchecked-active-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--switch-unchecked-active-font-opacity));
}
.switch:checked {
  background-color: hsla(var(--palette-background-bolder), var(--switch-checked-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--switch-checked-font-opacity));
}
.switch:checked:enabled:is(:focus, :hover) {
  background-color: hsla(var(--palette-background-bolder), var(--switch-checked-focus-background-opacity));
  color: hsla(var(--palette-foreground-normal), var(--switch-checked-focus-font-opacity));
}
.switch:checked:is(:enabled:active, [aria-pressed=true]) {
  background-color: hsla(var(--palette-background-bolder), var(--switch-checked-active-background-opacity));
  color: hsla(var(--palette-background-bolder), var(--switch-checked-active-font-opacity));
}
.text-input {
  --alignment-text: initial;
  --palette-background-lightest: var(--palettes-neutral-background-lightest);
  --palette-background-lighter: var(--palettes-neutral-background-lighter);
  --palette-background-light: var(--palettes-neutral-background-light);
  --palette-background-normal: var(--palettes-neutral-background-normal);
  --palette-background-bold: var(--palettes-neutral-background-bold);
  --palette-background-bolder: var(--palettes-neutral-background-bolder);
  --palette-background-boldest: var(--palettes-neutral-background-boldest);
  --palette-foreground-lightest: var(--palettes-neutral-foreground-lightest);
  --palette-foreground-lighter: var(--palettes-neutral-foreground-lighter);
  --palette-foreground-light: var(--palettes-neutral-foreground-light);
  --palette-foreground-normal: var(--palettes-neutral-foreground-normal);
  --palette-foreground-bold: var(--palettes-neutral-foreground-bold);
  --palette-foreground-bolder: var(--palettes-neutral-foreground-bolder);
  --palette-foreground-boldest: var(--palettes-neutral-foreground-boldest);
  --shape-radius: var(--text-input-border-radius);
  --sizing-font-size-inline: var(--text-input-font-size);
  --transform-text: inherit;
  appearance: none;
  position: relative;
  padding: calc(var(--text-input-padding-y) * 1em) calc(var(--text-input-padding-x) * 1em);
  outline: none !important;
  background: transparent;
  border-radius: calc(var(--shape-radius) * 1rem);
  border-style: var(--text-input-border-style);
  border-width: var(--text-input-border-width);
  font-size: calc(var(--sizing-font-size-inline) * 1rem);
  text-align: var(--alignment-text);
  text-transform: var(--transform-text);
  vertical-align: middle;
  transition:
    border-color var(--animations-visual-duration) var(--animations-visual-function),
    background-color var(--animations-visual-duration) var(--animations-visual-function),
    opacity var(--animations-visual-duration) var(--animations-visual-function),
    color var(--animations-visual-duration) var(--animations-visual-function);
}
.text-input:disabled {
  cursor: not-allowed;
  opacity: var(--text-input-disabled-opacity);
}
.text-input::placeholder {
  color: currentColor;
  opacity: var(--text-input-placeholder-opacity);
}
.text-input:not([data-variation]) {
  border-color: hsla(var(--palette-background-bolder), var(--text-input-outline-border-opacity));
}
.text-input:not([data-variation]):enabled:hover {
  border-color: hsla(var(--palette-background-bolder), var(--text-input-outline-hover-border-opacity));
}
.text-input:not([data-variation]):enabled:is(:active, :focus) {
  border-color: hsla(var(--palette-background-bolder), var(--text-input-outline-active-border-opacity));
}
.text-input[data-variation=block] {
  border-color: hsla(var(--palette-background-bolder), var(--text-input-block-border-opacity));
  background-color: hsla(var(--palette-background-bolder), var(--text-input-block-background-opacity));
}
.text-input[data-variation=block]:enabled:hover {
  border-color: hsla(var(--palette-background-bolder), var(--text-input-block-hover-border-opacity));
  background-color: hsla(var(--palette-background-bolder), var(--text-input-block-hover-background-opacity));
}
.text-input[data-variation=block]:enabled:is(:active, :focus) {
  border-color: hsla(var(--palette-background-bolder), var(--text-input-block-active-border-opacity));
  background-color: hsla(var(--palette-background-bolder), var(--text-input-block-active-background-opacity));
}
.text-input[data-variation=flush] {
  padding: 0;
  border: none;
  border-radius: none;
  font-size: inherit;
  line-height: inherit;
  text-align: inherit;
  text-transform: inherit;
  vertical-align: top;
}
.text-input[data-variation=flush][data-palette] {
  color: hsla(var(--palette-background-boldest), var(--text-input-flush-font-opacity));
}
.text-input[data-variation=flush]:enabled:is(:active, :hover, :focus) {
  text-decoration: underline;
}
.text-input:not([cols], [size]) {
  width: 100%;
}
textarea.text-input {
  max-width: 100%;
  max-height: 100%;
  resize: none;
}
.form--control {
  display: flex;
  flex-direction: column;
  gap: calc(var(--form-control-gap-y) * 1em) calc(var(--form-control-gap-x) * 1em);
  width: 100%;
}
.form--field-set {
  padding: calc(var(--form-field-set-padding-y) * 1rem) calc(var(--form-field-set-padding-x) * 1rem);
  border: var(--form-field-set-border-width) var(--form-field-set-border-style) hsla(var(--palette-foreground-normal), var(--form-field-set-border-opacity));
  transition: border-color var(--animations-visual-duration) var(--animations-visual-function);
}
.form--field-set[data-palette] {
  border-color: hsla(var(--palette-background-bolder), var(--form-field-set-border-opacity));
}
.form--help-text {
  font-