@makigas/genshi/dist/genshi.css

An atomic design system

:where(:root) {
  --genshi-font-family:
    system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
  --genshi-mono-family:
    ui-monospace, menlo, monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono",
    "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Consolas", "Courier New",
    monospace;
  --genshi-title-family:
    "Montserrat", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu,
    cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --genshi-font-size: 100%;
  --genshi-black: #202020;
  --genshi-white: #fcf7f7;
  --genshi-makigas-100: #ABB8D1;
  --genshi-makigas-200: #90A1C2;
  --genshi-makigas-300: #768BB3;
  --genshi-makigas-400: #5D75A3;
  --genshi-makigas-500: #4d6699;
  --genshi-makigas-600: #425884;
  --genshi-makigas-700: #324367;
  --genshi-makigas-800: #222F4A;
  --genshi-makigas-900: #141D30;
  --genshi-makigas-contrast: white;
  --genshi-edu-100: #E9D0A7;
  --genshi-edu-200: #E1C08A;
  --genshi-edu-300: #D9B16A;
  --genshi-edu-400: #D1A147;
  --genshi-edu-500: #cc9629;
  --genshi-edu-600: #B18222;
  --genshi-edu-700: #8A6418;
  --genshi-edu-800: #65490F;
  --genshi-edu-900: #422E07;
  --genshi-edu-contrast: black;
  --genshi-ngl-100: #B5D9AE;
  --genshi-ngl-200: #9DCD93;
  --genshi-ngl-300: #84C078;
  --genshi-ngl-400: #6BB35C;
  --genshi-ngl-500: #59aa48;
  --genshi-ngl-600: #4C933D;
  --genshi-ngl-700: #3A722E;
  --genshi-ngl-800: #28531F;
  --genshi-ngl-900: #183612;
  --genshi-ngl-contrast: black;
  --genshi-red-100: #EBBBB2;
  --genshi-red-200: #E3A598;
  --genshi-red-300: #DA8E80;
  --genshi-red-400: #D07767;
  --genshi-red-500: #c96857;
  --genshi-red-600: #AE594B;
  --genshi-red-700: #884438;
  --genshi-red-800: #643027;
  --genshi-red-900: #411D17;
  --genshi-red-contrast: black;
  --genshi-orange-100: #E6D0B9;
  --genshi-orange-200: #DDC0A1;
  --genshi-orange-300: #D4B18A;
  --genshi-orange-400: #CBA173;
  --genshi-orange-500: #c59763;
  --genshi-orange-600: #AB8355;
  --genshi-orange-700: #856541;
  --genshi-orange-800: #61492E;
  --genshi-orange-900: #402F1C;
  --genshi-orange-contrast: black;
  --genshi-yellow-100: #E4E6BC;
  --genshi-yellow-200: #DBDEA5;
  --genshi-yellow-300: #D3D58E;
  --genshi-yellow-400: #CACD75;
  --genshi-yellow-500: #c5c763;
  --genshi-yellow-600: #ABAD55;
  --genshi-yellow-700: #858741;
  --genshi-yellow-800: #61622E;
  --genshi-yellow-900: #40401C;
  --genshi-yellow-contrast: black;
  --genshi-green-100: #CADEB6;
  --genshi-green-200: #B8D49E;
  --genshi-green-300: #A7C985;
  --genshi-green-400: #96BD6C;
  --genshi-green-500: #8bb65a;
  --genshi-green-600: #789E4D;
  --genshi-green-700: #5D7B3B;
  --genshi-green-800: #435929;
  --genshi-green-900: #2A3A18;
  --genshi-green-contrast: black;
  --genshi-cyan-100: #B7DBE7;
  --genshi-cyan-200: #9FCFDF;
  --genshi-cyan-300: #86C3D7;
  --genshi-cyan-400: #6BB7CF;
  --genshi-cyan-500: #58afc9;
  --genshi-cyan-600: #4B98AE;
  --genshi-cyan-700: #397688;
  --genshi-cyan-800: #285664;
  --genshi-cyan-900: #183841;
  --genshi-cyan-contrast: black;
  --genshi-blue-100: #9CBCCE;
  --genshi-blue-200: #7BA6BE;
  --genshi-blue-300: #5B90AD;
  --genshi-blue-400: #377B9D;
  --genshi-blue-500: #186d92;
  --genshi-blue-600: #135E7E;
  --genshi-blue-700: #0D4862;
  --genshi-blue-800: #073346;
  --genshi-blue-900: #031F2D;
  --genshi-blue-contrast: white;
  --genshi-purple-100: #B6ACCE;
  --genshi-purple-200: #9F92BE;
  --genshi-purple-300: #8878AD;
  --genshi-purple-400: #735E9C;
  --genshi-purple-500: #654d91;
  --genshi-purple-600: #57427D;
  --genshi-purple-700: #423261;
  --genshi-purple-800: #2F2246;
  --genshi-purple-900: #1C142D;
  --genshi-purple-contrast: white;
  --genshi-gray-100: #D6D8DA;
  --genshi-gray-200: #C9CBCE;
  --genshi-gray-300: #BCBFC2;
  --genshi-gray-400: #AFB2B7;
  --genshi-gray-500: #a6aaaf;
  --genshi-gray-600: #909398;
  --genshi-gray-700: #707276;
  --genshi-gray-800: #515356;
  --genshi-gray-900: #343638;
  --genshi-gray-contrast: black;
  --genshi-teal-100: #C9CAC7;
  --genshi-teal-200: #B7B9B5;
  --genshi-teal-300: #A6A8A3;
  --genshi-teal-400: #959891;
  --genshi-teal-500: #8a8d86;
  --genshi-teal-600: #777A74;
  --genshi-teal-700: #5C5E59;
  --genshi-teal-800: #424440;
  --genshi-teal-900: #2A2B29;
  --genshi-teal-contrast: black;
  --genshi-icon-select-chev: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20stroke%3D%22%238a8d86%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  color-scheme: light;
  --genshi-background-color: var(--genshi-white);
  --genshi-foreground-color: var(--genshi-black);
  --genshi-accent-color: var(--genshi-blue-500);
  --genshi-link-color: var(--genshi-blue-500);
  --genshi-link-color-hover: oklch(from var(--genshi-link-color) l calc(c + 0.1) h);
  --genshi-mark-color: var(--genshi-black);
  --genshi-mark-bg-color: var(--genshi-yellow-100);
  --genshi-ins-color: var(--genshi-green-800);
  --genshi-ins-bg-color: var(--genshi-green-100);
  --genshi-del-color: var(--genshi-red-900);
  --genshi-del-bg-color: var(--genshi-red-100);
  --genshi-kbd-color: var(--genshi-white);
  --genshi-kbd-bg-color: var(--genshi-gray-900);
  --genshi-pre-code-bg-color: var(--genshi-blue-100);
  --genshi-button-accent: var(--genshi-teal-800);
  --genshi-bold-button-accent: var(--genshi-teal-700);
  --genshi-button-suggested-accent: var(--genshi-blue-600);
  --genshi-button-destructive-accent: var(--genshi-red-700);
  --genshi-form-valid-accent: var(--genshi-green-800);
  --genshi-form-invalid-accent: var(--genshi-red-700);
  --genshi-form-checkbox-accent: var(--genshi-blue-600);
}
@media screen and (prefers-color-scheme: dark) {
  :where(:root) {
    color-scheme: dark;
    --genshi-background-color: var(--genshi-black);
    --genshi-foreground-color: var(--genshi-white);
    --genshi-link-color: var(--genshi-cyan-200);
    --genshi-mark-color: white;
    --genshi-mark-bg-color: var(--genshi-orange-700);
    --genshi-kbd-bg-color: var(--genshi-gray-800);
    --genshi-pre-code-bg-color: var(--genshi-cyan-900);
    --genshi-button-accent: var(--genshi-foreground-color);
    --genshi-bold-button-accent: var(--genshi-teal-800);
    --genshi-button-suggested-accent: var(--genshi-cyan-200);
    --genshi-bold-button-suggested-accent: var(--genshi-cyan-800);
    --genshi-button-destructive-accent: var(--genshi-red-200);
    --genshi-bold-button-destructive-accent: var(--genshi-red-600);
    --genshi-form-valid-accent: var(--genshi-green-200);
    --genshi-form-invalid-accent: var(--genshi-red-200);
    --genshi-form-checkbox-accent: var(--genshi-blue-300);
  }
}

@media screen and (min-width: 768px) {
  :where(:root) {
    --genshi-font-size: 106.25%;
  }
}
@media screen and (min-width: 1024px) {
  :where(:root) {
    --genshi-font-size: 112.5%;
  }
}
@media screen and (min-width: 1280px) {
  :where(:root) {
    --genshi-font-size: 118.75%;
  }
}
@media screen and (min-width: 1600px) {
  :where(:root) {
    --genshi-font-size: 125%;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(body) {
  margin: 0;
  padding: 0;
  background: var(--genshi-background-color);
  color: var(--genshi-foreground-color);
}

:where(h1),
:where(h2),
:where(h3),
:where(h4),
:where(h5),
:where(h6) {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

:where(p),
:where(ul),
:where(ol),
:where(dl) {
  margin-top: 0;
  margin-bottom: 1rem;
}

:where(li) {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

:where(hr) {
  height: 0;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid oklch(from var(--genshi-foreground-color) l c h/50%);
}

:where(pre) {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

:where(:root) {
  font-family: var(--genshi-font-family);
  font-size: var(--genshi-font-size);
  line-height: 1.4;
}

:where(h1),
:where(h2),
:where(h3),
:where(h4),
:where(h5),
:where(h6) {
  font-family: var(--genshi-title-family);
}

:where(h1) {
  font-size: calc(2 * var(--genshi-font-size));
}

:where(h2) {
  font-size: calc(1.75 * var(--genshi-font-size));
}

:where(h3) {
  font-size: calc(1.5 * var(--genshi-font-size));
}

:where(h4) {
  font-size: calc(1.25 * var(--genshi-font-size));
}

:where(h5) {
  font-size: var(--genshi-font-size);
}

:where(h6) {
  font-size: calc(0.75 * var(--genshi-font-size));
}

:where(a) {
  color: var(--genshi-link-color);
}
:where(a):hover {
  color: var(--genshi-link-color-hover);
}

:where(b),
:where(strong),
:where(h1),
:where(h2),
:where(h3),
:where(h4),
:where(h5),
:where(h6) {
  font-weight: 700;
}

:where(em),
:where(i),
:where(cite) {
  font-style: italic;
}

:where(mark),
:where(ins),
:where(del) {
  padding: 0.08rem 0.24rem;
}

:where(mark) {
  background-color: var(--genshi-mark-bg-color);
  color: var(--genshi-mark-color);
}

:where(ins) {
  background-color: var(--genshi-ins-bg-color);
  color: var(--genshi-ins-color);
}

:where(del) {
  background-color: var(--genshi-del-bg-color);
  color: var(--genshi-del-color);
}

:where(kbd) {
  padding: 0.12rem 0.36rem;
  background-color: var(--genshi-kbd-bg-color);
  color: var(--genshi-kbd-color);
  font-weight: 600;
}

:where(kbd),
:where(code),
:where(pre) {
  font-family: var(--genshi-mono-family);
  font-size: 0.9rem;
}

:where(pre).code {
  padding: 1.5rem;
  overflow: hidden;
  overflow-x: auto;
  border-radius: 10px;
  background-color: var(--genshi-pre-code-bg-color);
}

:where(small) {
  font-size: 0.9rem;
}

:where(blockquote) {
  margin: 1rem 2rem;
  padding-left: 1rem;
  border-left: 3px solid oklch(from var(--genshi-accent-color) l c h/25%);
}

:where(ul),
:where(ol) {
  padding-left: 1.75rem;
}

:where(dt) {
  font-weight: 700;
}

:where(dd) {
  margin-left: 0;
}

:where(dt) + :where(dd) {
  margin-top: 0.25rem;
}

:where(dd) + :where(dt) {
  margin-top: 1rem;
}

.GenshiCols {
  --genshi-cols-direction: column;
  display: flex;
  flex-direction: var(--genshi-cols-direction);
  width: 100%;
  margin-bottom: 1rem;
}
.GenshiCols > * {
  flex: 1;
}
.GenshiCols--xsflow {
  --genshi-cols-direction: row;
}
@media screen and (min-width: 768px) {
  .GenshiCols--smflow, .GenshiCols:not(.GenshiCols--xsflow, .GenshiCols--mdflow, .GenshiCols--lgflow, .GenshiCols--xlflow) {
    --genshi-cols-direction: row;
  }
}
@media screen and (min-width: 1024px) {
  .GenshiCols--mdflow {
    --genshi-cols-direction: row;
  }
}
@media screen and (min-width: 1280px) {
  .GenshiCols--lgflow {
    --genshi-cols-direction: row;
  }
}
@media screen and (min-width: 1600px) {
  .GenshiCols--xlflow {
    --genshi-cols-direction: row;
  }
}
.GenshiCols {
  --genshi-density-gap: 1rem;
  gap: var(--genshi-density-gap);
}
.GenshiCols--gapless {
  --genshi-density-gap: 0;
}
.GenshiCols--compact {
  --genshi-density-gap: 0.5rem;
}
.GenshiCols--cozy {
  --genshi-density-gap: 1.5rem;
}

.GenshiStack {
  display: flex;
  flex-flow: wrap row;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}
.GenshiStack {
  --genshi-density-gap: 1rem;
  gap: var(--genshi-density-gap);
}
.GenshiStack--gapless {
  --genshi-density-gap: 0;
}
.GenshiStack--compact {
  --genshi-density-gap: 0.5rem;
}
.GenshiStack--cozy {
  --genshi-density-gap: 1.5rem;
}
.GenshiStack--end {
  justify-content: end;
}
.GenshiStack--between {
  justify-content: space-between;
}
.GenshiStack--center {
  justify-content: space-evenly;
}
.GenshiStack--v {
  flex-direction: column;
}
.GenshiStack--hr {
  flex-direction: row-reverse;
}
.GenshiStack--vr {
  flex-direction: column-reverse;
}

.GenshiWrapper {
  margin-right: 1rem;
  margin-left: 1rem;
}
@media screen and (min-width: 768px) {
  .GenshiWrapper {
    margin-right: 1rem;
    margin-left: 1rem;
  }
}
@media screen and (min-width: 1024px) {
  .GenshiWrapper {
    width: 988px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (min-width: 1280px) {
  .GenshiWrapper {
    width: 1242px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (min-width: 1600px) {
  .GenshiWrapper {
    width: 1560px;
    margin-right: auto;
    margin-left: auto;
  }
}
.GenshiWrapper--breath {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.GenshiWrapper--fluid {
  width: initial;
  margin-right: 1rem;
  margin-left: 1rem;
}

.GenshiButton {
  --genshi-button-foreground: var(--genshi-button-accent);
  --genshi-button-background: oklch(from var(--genshi-button-accent) l c h / 2%);
  --genshi-button-hover-background: oklch(from var(--genshi-button-accent) l c h / 8%);
  --genshi-button-active-background: oklch(from var(--genshi-button-accent) l c h / 24%);
  --genshi-button-border-color: oklch(from var(--genshi-button-foreground) l c h / 50%);
  --genshi-button-hover-border-color: oklch(from var(--genshi-button-foreground) l c h / 70%);
  --genshi-button-focus-border-color: oklch(from var(--genshi-button-foreground) l c h / 90%);
  --genshi-button-focus-outline-color: oklch(from var(--genshi-button-border-color) l c h / 33%);
  display: inline-flex;
  padding: 0.5em 1em;
  transition: outline-color 0.25s ease-in-out, background-color 0.125s ease-in-out, border-color 0.25s ease-in-out;
  border: 1px solid var(--genshi-button-border-color);
  border-radius: 5px;
  outline: 0.2em solid transparent;
  background-color: var(--genshi-button-background);
  color: var(--genshi-button-foreground);
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2;
  text-align: center;
  text-decoration: inherit;
  vertical-align: middle;
  cursor: pointer;
  gap: 0.5rem;
}
.GenshiButton--xs {
  font-size: 0.65rem;
}
.GenshiButton--sm {
  font-size: 0.8rem;
}
.GenshiButton--md {
  font-size: 1rem;
}
.GenshiButton--lg {
  font-size: 1.2rem;
}
.GenshiButton--xl {
  font-size: 1.35rem;
}
.GenshiButton__icon {
  width: 1.2rem;
  height: 1.2em;
}
.GenshiButton:hover {
  border-color: var(--genshi-button-hover-border-color);
  background-color: var(--genshi-button-hover-background);
}
.GenshiButton:active {
  background-color: var(--genshi-button-active-background);
}
.GenshiButton:active, .GenshiButton:focus {
  border-color: var(--genshi-button-focus-border-color);
}
.GenshiButton:focus {
  outline-color: var(--genshi-button-focus-outline-color);
}
.GenshiButton--suggested {
  --genshi-button-accent: var(--genshi-button-suggested-accent);
  --genshi-bold-button-accent: var(
    --genshi-bold-button-suggested-accent,
    var(--genshi-button-accent)
  );
}
.GenshiButton--destructive {
  --genshi-button-accent: var(--genshi-button-destructive-accent);
  --genshi-bold-button-accent: var(
    --genshi-bold-button-destructive-accent,
    var(--genshi-button-accent)
  );
}
.GenshiButton--bold {
  --genshi-button-foreground: white;
  --genshi-button-background: var(--genshi-bold-button-accent);
  --genshi-button-hover-background: color-mix(
    in oklch,
    var(--genshi-bold-button-accent),
    var(--genshi-button-foreground) 8%
  );
  --genshi-button-active-background: color-mix(
    in oklch,
    var(--genshi-bold-button-accent),
    var(--genshi-button-background) 4%
  );
  --genshi-button-border-color: color-mix(
    in oklch,
    var(--genshi-foreground-color),
    var(--genshi-button-background) 75%
  );
  --genshi-button-hover-border-color: color-mix(
    in oklch,
    var(--genshi-foreground-color),
    var(--genshi-button-background) 50%
  );
  --genshi-button-focus-border-color: color-mix(
    in oklch,
    var(--genshi-foreground-color),
    var(--genshi-button-background) 50%
  );
  --genshi-button-focus-outline-color: oklch(
    from color-mix(in oklch, var(--genshi-bold-button-accent), var(--genshi-foreground-color) 60%)
      l c h / 40%
  );
}
.GenshiButton[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

a.GenshiButton {
  display: inline-block;
}
a.GenshiButton:hover {
  color: var(--genshi-button-foreground);
}

.GenshiInput {
  --genshi-input-accent: var(--genshi-radiogroup-validation-accent, var(--genshi-foreground-color));
  --genshi-input-foreground: var(--genshi-foreground-color);
  --genshi-input-background-color: oklch(from var(--genshi-input-accent) l c h / 3%);
  --genshi-input-border-color: oklch(from var(--genshi-input-accent) l c h / 20%);
  --genshi-input-hover-border-color: oklch(from var(--genshi-accent-color) l c h / 40%);
  --genshi-input-focus-border-color: oklch(from var(--genshi-accent-color) l c h / 60%);
  --genshi-input-focus-outline-color: oklch(from var(--genshi-accent-color) l c h / 30%);
  --genshi-input-font-family: inherit;
  --genshi-file-field-button-background: oklch(from var(--genshi-input-accent) l c h / 4%);
  --genshi-file-field-button-hover-background: oklch(from var(--genshi-input-accent) l c h / 16%);
  --genshi-file-field-button-active-background: oklch(from var(--genshi-input-accent) l c h / 24%);
  --genshi-input-label-color: var(--genshi-radiogroup-validation-accent, var(--genshi-foreground));
  --genshi-checkbox-background: var(
    --genshi-radiogroup-validation-accent,
    var(--genshi-form-checkbox-accent)
  );
  display: block;
  margin-bottom: 1rem;
}
.GenshiInput:has(.GenshiInput__control[aria-invalid=true]) {
  --genshi-input-accent: var(--genshi-form-invalid-accent);
}
.GenshiInput:has(.GenshiInput__control[aria-invalid=false]) {
  --genshi-input-accent: var(--genshi-form-valid-accent);
}
.GenshiInput:has(.GenshiInput__control[aria-invalid=true]), .GenshiInput:has(.GenshiInput__control[aria-invalid=false]) {
  --genshi-accent-color: var(--genshi-input-accent);
  --genshi-input-label-color: var(--genshi-input-accent);
  --genshi-input-helper-color: var(--genshi-input-accent);
  --genshi-checkbox-background: var(--genshi-input-accent);
}
.GenshiInput__control[type=checkbox][aria-invalid=true], .GenshiInput__control[type=checkbox][aria-invalid=false], .GenshiInput__control[type=radio][aria-invalid=true], .GenshiInput__control[type=radio][aria-invalid=false] {
  --genshi-input-border-color: var(--genshi-checkbox-background);
}
.GenshiInput__label {
  color: var(--genshi-input-label-color);
}
.GenshiInput__label:has(input[type=checkbox]), .GenshiInput__label:has(input[type=radio]) {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.GenshiInput__helper {
  display: inline-block;
  color: var(--genshi-input-helper-color, var(--genshi-foreground));
  font-size: 0.875em;
}
.GenshiInput__label:has(input[type=checkbox]) + .GenshiInput__helper, .GenshiInput__label:has(input[type=radio]) + .GenshiInput__helper {
  margin-left: 2.1em;
}
.GenshiInput__label:has(input[type=checkbox][disabled]), .GenshiInput__label:has(input[type=radio][disabled]) {
  cursor: not-allowed;
}
.GenshiInput__field {
  display: grid;
  position: relative;
}
.GenshiInput__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  padding: 0.7em;
  transition: outline-color 0.25s ease-in-out, background-color 0.125s ease-in-out, border-color 0.25s ease-in-out;
  border: 1px solid var(--genshi-input-border-color);
  border-radius: 4px;
  outline: 2px solid transparent;
  background-color: var(--genshi-input-background-color);
  color: var(--genshi-input-foreground);
  font-family: var(--genshi-input-font-family);
  font-size: 1em;
}
input[type=color].GenshiInput__control {
  padding: 0.3em;
}

input[type=checkbox].GenshiInput__control {
  width: 1.25em;
  height: 1.25em;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--genshi-input-border-color);
}
input[type=checkbox].GenshiInput__control:checked {
  background-color: oklch(from var(--genshi-checkbox-background) l c h/80%);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22css-i6dzq1%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em 1em;
}

input[type=radio].GenshiInput__control {
  width: 1.25em;
  height: 1.25em;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--genshi-input-border-color);
  border-radius: 100%;
}
input[type=radio].GenshiInput__control:checked {
  background-color: oklch(from var(--genshi-checkbox-background) l c h/80%);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22css-i6dzq1%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em 1em;
}

input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]).GenshiInput__control {
  height: calc(2.4em + 2px);
}

input[type=file].GenshiInput__control {
  display: flex;
  align-content: center;
  padding: 0;
}
input[type=file].GenshiInput__control::file-selector-button {
  margin-right: 1em;
  padding: 0.5em 1em;
  border: none;
  border-right: 1px solid var(--genshi-input-border-color);
  background-color: var(--genshi-file-field-button-background);
}
input[type=file].GenshiInput__control::file-selector-button:hover {
  background-color: var(--genshi-file-field-button-hover-background);
}
input[type=file].GenshiInput__control::file-selector-button:focus, input[type=file].GenshiInput__control::file-selector-button:active {
  background-color: var(--genshi-file-field-button-active-background);
}

textarea.GenshiInput__control {
  resize: vertical;
}

.GenshiInput--mono .GenshiInput__control {
  font-size: 0.9rem;
}
.GenshiInput__control:hover {
  border-color: var(--genshi-input-hover-border-color);
}
.GenshiInput__control:focus {
  border-color: var(--genshi-input-focus-border-color);
  outline-color: var(--genshi-input-focus-outline-color);
}
.GenshiInput__control[readonly] {
  --genshi-input-focus-outline-color: transparent;
}
.GenshiInput__control[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.GenshiInput__icon {
  position: absolute;
  top: 50%;
  left: 0.5em;
  width: 1.25em;
  height: 1.25em;
  transform: translateY(-50%);
  stroke: var(--genshi-input-accent);
}
.GenshiInput__control + .GenshiInput__icon {
  right: 0.5em;
  left: unset;
}
.GenshiInput__field:has(textarea) .GenshiInput__icon {
  top: 1.125em;
  transform: unset;
}
.GenshiInput__field:has(.GenshiInput__icon + .GenshiInput__control) .GenshiInput__control {
  padding-left: 2.25em;
}
.GenshiInput__field:has(.GenshiInput__control + .GenshiInput__icon) .GenshiInput__control {
  padding-right: 2.25em;
}
.GenshiInput--xs {
  font-size: 0.7em;
}
.GenshiInput--sm {
  font-size: 0.85em;
}
.GenshiInput--lg {
  font-size: 1.15em;
}
.GenshiInput--xl {
  font-size: 1.3em;
}
.GenshiInput--mono {
  --genshi-input-font-family: var(--genshi-mono-family);
}

.GenshiRadioGroup {
  margin-bottom: 1rem;
  padding: 0;
  border: none;
}
.GenshiRadioGroup[aria-invalid=true] {
  --genshi-radiogroup-accent: var(--genshi-form-invalid-accent);
}
.GenshiRadioGroup[aria-invalid=false] {
  --genshi-radiogroup-accent: var(--genshi-form-valid-accent);
}
.GenshiRadioGroup[aria-invalid=true], .GenshiRadioGroup[aria-invalid=false] {
  --genshi-radiogroup-validation-accent: var(--genshi-radiogroup-accent);
  --genshi-radiogroup-legend-color: var(--genshi-radiogroup-accent);
  --genshi-radiogroup-helper-color: var(--genshi-radiogroup-accent);
}
.GenshiRadioGroup legend {
  margin-bottom: 0.5rem;
  padding-left: 0;
  color: var(--genshi-radiogroup-legend-color, var(--genshi-foreground));
}
.GenshiRadioGroup .GenshiInput {
  margin-bottom: 0.5rem;
}
.GenshiRadioGroup__helper {
  display: inline-block;
  color: var(--genshi-radiogroup-helper-color, var(--genshi-foreground));
  font-size: 0.875em;
}
.GenshiRadioGroup--inline {
  display: inline-flex;
  flex-flow: row wrap;
  column-gap: 1rem;
}
.GenshiRadioGroup--inline .GenshiInput {
  display: inline-grid;
}

.GenshiSelect {
  --genshi-select-accent: var(--genshi-foreground-color);
  --genshi-select-foreground: var(--genshi-foreground-color);
  --genshi-select-background-color: oklch(from var(--genshi-select-accent) l c h / 3%);
  --genshi-select-border-color: oklch(from var(--genshi-select-accent) l c h / 20%);
  --genshi-select-hover-border-color: oklch(from var(--genshi-select-accent) l c h / 40%);
  --genshi-select-focus-border-color: oklch(from var(--genshi-select-accent) l c h / 60%);
  --genshi-select-focus-outline-color: oklch(from var(--genshi-select-accent) l c h / 30%);
  --genshi-select-font-family: inherit;
  display: block;
  margin-bottom: 1rem;
}
.GenshiSelect:has([aria-invalid=true]) {
  --genshi-select-accent: var(--genshi-form-invalid-accent);
}
.GenshiSelect:has([aria-invalid=false]) {
  --genshi-select-accent: var(--genshi-form-valid-accent);
}
.GenshiSelect__helper {
  display: inline-block;
  color: var(--genshi-input-helper-color, var(--genshi-foreground));
  font-size: 0.875em;
}
.GenshiSelect:has([aria-invalid=true]) .GenshiSelect__label, .GenshiSelect:has([aria-invalid=true]) .GenshiSelect__helper, .GenshiSelect:has([aria-invalid=false]) .GenshiSelect__label, .GenshiSelect:has([aria-invalid=false]) .GenshiSelect__helper {
  color: var(--genshi-select-accent);
}
.GenshiSelect__control {
  display: block;
  width: 100%;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  padding: 0.7em;
  transition: outline-color 0.25s ease-in-out, background-color 0.125s ease-in-out, border-color 0.25s ease-in-out;
  appearance: none;
  border: 1px solid var(--genshi-select-border-color);
  border-radius: 4px;
  outline: 2px solid transparent;
  background-color: var(--genshi-select-background-color);
  color: var(--genshi-select-foreground);
  font-family: var(--genshi-select-font-family);
  font-size: 1em;
}
.GenshiSelect__control:not([multiple]) {
  background-image: var(--genshi-icon-select-chev);
  background-repeat: no-repeat;
  background-position: calc(100% - 0.75em) center;
  background-size: 1.5em 1.5em;
}
.GenshiSelect__control:hover {
  border-color: var(--genshi-select-hover-border-color);
}
.GenshiSelect__control:focus {
  border-color: var(--genshi-select-focus-border-color);
  outline-color: var(--genshi-select-focus-outline-color);
}
.GenshiSelect__control[disabled] {
  --genshi-select-background-color: oklch(from var(--genshi-select-accent) l c h / 1%);
  --genshi-select-border-color: oklch(from var(--genshi-select-accent) l c h / 10%);
  --genshi-select-foreground: oklch(from var(--genshi-foreground-color) l c h / 80%);
  --genshi-select-hover-border-color: var(--genshi-select-border-color);
  --genshi-select-focus-border-color: var(--genshi-select-border-color);
  cursor: not-allowed;
}
.GenshiSelect--xs {
  font-size: 0.7em;
}
.GenshiSelect--sm {
  font-size: 0.85em;
}
.GenshiSelect--lg {
  font-size: 1.15em;
}
.GenshiSelect--xl {
  font-size: 1.3em;
}

/*# sourceMappingURL=genshi.css.map */