/* Universal AXING stylesheet template */

/* ==========================================================================
   Core Tokens
   ========================================================================== */

:root {
    /* Brand */
    --axing-green: rgb(35, 149, 146);
    --axing-green-soft: hsl(176, 36%, 93%);
    --axing-shell-background: linear-gradient(180deg, hsl(170, 20%, 97%) 0%, hsl(180, 18%, 99%) 100%);

    /* Typography */
    --axing-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --axing-font-family-sans-serif: Arial, system-ui, sans-serif, var(--axing-font-family-emoji);
    --axing-font-family: var(--axing-font-family-sans-serif);
    --axing-font-size: 16px;
    --axing-font-weight: 400;
    --axing-line-height: 1.5;
    --axing-text-underline-offset: 0.1rem;

    /* Layout */
    --axing-spacing: 1rem;

    /* Control sizing and interaction */
    --axing-border-radius: 0.375rem;
    --axing-border-width: 0.0625rem;
    --axing-outline-width: 0.125rem;
    --axing-transition: 0.2s ease-in-out;
    --axing-transition-fast: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    --axing-transition-button: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    --axing-control-min-height: 32px;
    --axing-control-padding: 0.375rem 0.75rem;
    --axing-button-padding: 0.375rem 1rem;
    --axing-fieldset-padding: 0.75rem;
    --axing-focus-ring: 0 0 0 calc(var(--axing-outline-width) * 1.5) var(--axing-primary-focus);
    --axing-checkbox-size: 1.25rem;
    --axing-checkbox-radius: 0.25rem;
    --axing-select-chevron-offset: 0.75rem;
    --axing-file-button-gap: 0.75rem;
    --axing-control-text-inverse: var(--axing-primary-inverse);
    --axing-disabled-opacity: 0.55;
    --axing-disabled-text: color-mix(in srgb, var(--axing-color) 60%, var(--axing-background-color));
    --axing-disabled-border: color-mix(in srgb, var(--axing-form-element-border-color) 70%, var(--axing-background-color));
    --axing-disabled-background: color-mix(in srgb, var(--axing-form-element-background-color) 85%, var(--axing-background-color));

    /* Grouped controls */
    --axing-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);

    /* Icons */
    --axing-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --axing-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    --axing-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(35, 38, 44)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --axing-icon-theme-system: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='12' rx='2'/%3E%3Cpath d='M8 19.5h8M12 16.5v3'/%3E%3C/svg%3E");
    --axing-icon-theme-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5' fill='black' stroke='none'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M2 12h2.5M19.5 12H22M4.93 19.07l1.77-1.77M17.3 6.7l1.77-1.77'/%3E%3C/svg%3E");
    --axing-icon-theme-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 15.5A8.5 8.5 0 0 1 8.5 4 9 9 0 1 0 20 15.5z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Light Theme
   ========================================================================== */
:root:not([data-theme="dark"]),
[data-theme="light"] {
    color-scheme: light;

    --axing-background-color: #fff;
    --axing-shell-background: linear-gradient(180deg, hsl(170, 20%, 97%) 0%, hsl(180, 18%, 99%) 100%);
    --axing-color: hsl(0, 0%, 11%);
    --axing-text-selection-color: rgba(5, 162, 162, 0.25);
    --axing-muted-color: #646b79;
    --axing-muted-border-color: hsl(220, 23%, 92%);

    --axing-primary: hsl(178, 62%, 36%);
    --axing-primary-background: hsl(178, 62%, 36%);
    --axing-primary-border: var(--axing-primary-background);
    --axing-primary-underline: hsla(178, 62%, 36%, 0.502);
    --axing-primary-hover: hsl(178, 62%, 31%);
    --axing-primary-hover-background: hsl(178, 62%, 28%);
    --axing-primary-hover-border: var(--axing-primary-hover-background);
    --axing-primary-hover-underline: var(--axing-primary-hover);
    --axing-primary-focus: hsla(178, 62%, 45%, 0.5);
    --axing-primary-inverse: #fff;

    --axing-form-element-background-color: rgb(251, 251.5, 252.25);
    --axing-form-element-selected-background-color: #dfe3eb;
    --axing-form-element-border-color: hsl(221, 25%, 85%);
    --axing-form-element-color: #23262c;
    --axing-form-element-placeholder-color: var(--axing-muted-color);
    --axing-form-element-active-background-color: #fff;
    --axing-progress-background-color: #dfe3eb;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */
[data-theme="dark"] {
    color-scheme: dark;

    --axing-background-color: rgb(19, 22.5, 30.5);
    --axing-control-text-inverse: #e0e3e7;
    --axing-focus-ring: 0 0 0 calc(var(--axing-outline-width) * 1.75) hsla(178, 62%, 56%, 0.6);
    --axing-green-soft: hsla(178, 62%, 36%, 0.16);
    --axing-shell-background: linear-gradient(180deg, rgb(15, 18, 24) 0%, rgb(24, 28, 37) 100%);
    --axing-color: hsl(219, 13%, 70%);
    --axing-text-selection-color: rgba(10, 177, 177, 0.1875);
    --axing-muted-color: #7b8495;
    --axing-muted-border-color: #202632;

    --axing-primary: hsl(178, 62%, 30%);
    --axing-primary-background: hsl(178, 62%, 30%);
    --axing-primary-border: var(--axing-primary-background);
    --axing-primary-underline: hsla(178, 62%, 36%, 0.502);
    --axing-primary-hover: hsl(178, 62%, 24%);
    --axing-primary-hover-background: hsl(178, 62%, 24%);
    --axing-primary-hover-border: var(--axing-primary-hover-background);
    --axing-primary-hover-underline: var(--axing-primary-hover);
    --axing-primary-focus: hsla(178, 62%, 45%, 0.5);
    --axing-primary-inverse: #fff;

    --axing-form-element-background-color: rgb(28, 33, 43.5);
    --axing-form-element-selected-background-color: #2a3140;
    --axing-form-element-border-color: #2a3140;
    --axing-form-element-color: #e0e3e7;
    --axing-form-element-placeholder-color: #8891a4;
    --axing-form-element-active-background-color: rgb(26, 30.5, 40.25);
    --axing-progress-background-color: #202632;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --axing-background-color: rgb(19, 22.5, 30.5);
        --axing-control-text-inverse: #e0e3e7;
        --axing-focus-ring: 0 0 0 calc(var(--axing-outline-width) * 1.75) hsla(178, 62%, 56%, 0.6);
        --axing-green-soft: hsla(178, 62%, 36%, 0.16);
        --axing-shell-background: linear-gradient(180deg, rgb(15, 18, 24) 0%, rgb(24, 28, 37) 100%);
        --axing-color: hsl(219, 13%, 70%);
        --axing-text-selection-color: rgba(10, 177, 177, 0.1875);
        --axing-muted-color: #7b8495;
        --axing-muted-border-color: #202632;

        --axing-primary: hsl(178, 62%, 36%);
        --axing-primary-background: hsl(178, 62%, 36%);
        --axing-primary-border: var(--axing-primary-background);
        --axing-primary-underline: hsla(178, 62%, 36%, 0.502);
        --axing-primary-hover: hsl(178, 62%, 31%);
        --axing-primary-hover-background: hsl(178, 62%, 31%);
        --axing-primary-hover-border: var(--axing-primary-hover-background);
        --axing-primary-hover-underline: var(--axing-primary-hover);
        --axing-primary-focus: hsla(178, 62%, 45%, 0.5);
        --axing-primary-inverse: #fff;

        --axing-form-element-background-color: rgb(28, 33, 43.5);
        --axing-form-element-selected-background-color: #2a3140;
        --axing-form-element-border-color: #2a3140;
        --axing-form-element-color: #e0e3e7;
        --axing-form-element-placeholder-color: #8891a4;
        --axing-form-element-active-background-color: rgb(26, 30.5, 40.25);
        --axing-progress-background-color: #202632;
    }
}



[data-theme=dark] input:is([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=file]) {
    --axing-form-element-focus-color: var(--axing-primary-focus)
}

[data-theme=dark] details summary[role=button].contrast:not(.outline)::after,
[data-theme=dark] [aria-busy=true]:not(input, select, textarea).contrast:is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
    filter: brightness(0)
}

[type=checkbox],
[type=radio],
[type=range],
progress {
    accent-color: var(--axing-primary)
}

*,
::after,
::before {
    box-sizing: border-box;
    background-repeat: no-repeat
}

::after,
::before {
    text-decoration: inherit;
    vertical-align: inherit
}

:where(:host),
:where(:root) {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: var(--axing-background-color);
    color: var(--axing-color);
    font-weight: var(--axing-font-weight);
    font-size: var(--axing-font-size);
    line-height: var(--axing-line-height);
    font-family: var(--axing-font-family);
    text-underline-offset: var(--axing-text-underline-offset);
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4
}

body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    font-family: var(--axing-font-family);
    font-size: var(--axing-font-size);
    line-height: var(--axing-line-height);
    color: var(--axing-color);
    background: var(--axing-shell-background)
}

/* ==========================================================================
   Reset And Page Foundations
   ========================================================================== */

[hidden] {
	display: none !important;
}

*::selection {
	background: var(--axing-green);
	color: #fafbfb;
}

html,
body {
    width: 100%;
	min-height: 100%;
    font-size: var(--axing-font-size);
}

html {
    background: var(--axing-shell-background);
}

body > :first-child {
    margin-top: 0;
}

a,
a:visited {
    color: var(--axing-primary);
}

header nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 600;
}

header nav a,
header nav a:visited {
    text-decoration: none;
}

section {
    margin-bottom: var(--axing-spacing);
}

.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--axing-spacing);
    padding-left: var(--axing-spacing);
}

.padding {
    padding: var(--axing-spacing);
}

.overflow-auto {
    overflow: auto;
}

:disabled {
    opacity: var(--axing-disabled-opacity);
    cursor: not-allowed;
    transform: none;
    filter: saturate(0.45);
    color: var(--axing-disabled-text);
    border-color: var(--axing-disabled-border);
    background-color: var(--axing-disabled-background);
}

:where(a[href], [role="link"]):focus-visible {
    outline: none;
    box-shadow: var(--axing-focus-ring);
}

:where(
    button,
    [role="button"],
    input:not([type="hidden"]),
    select,
    textarea
):not(:disabled):focus-visible {
    outline: none;
    box-shadow: var(--axing-focus-ring);
}

:where(summary):focus-visible {
    outline: calc(var(--axing-outline-width) * 1.5) solid var(--axing-primary-focus);
    outline-offset: calc(var(--axing-spacing) * 0.25);
}

/* ==========================================================================
   Theme Toggle
   ========================================================================== */
.theme-toggle {
    --axing-theme-toggle-size: 38px;
    --axing-theme-toggle-focus-color: hsla(178, 62%, 56%, 0.6);
    display: inline-flex;
    align-items: stretch;
    min-height: var(--axing-theme-toggle-size);
    border-radius: var(--axing-border-radius);
}

.theme-toggle__option {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--axing-theme-toggle-size);
    min-width: var(--axing-theme-toggle-size);
    height: var(--axing-theme-toggle-size);
    min-height: var(--axing-theme-toggle-size);
    padding: 0;
    border: 1px solid var(--axing-primary-border);
    border-radius: var(--axing-border-radius);
    background: var(--axing-primary-background);
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    position: relative;
    z-index: 2;
    transition: var(--axing-transition-fast), transform 0.2s ease;
}

.theme-toggle > :not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.theme-toggle > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.theme-toggle__option:hover {
    background: var(--axing-primary-hover-background);
    border-color: var(--axing-primary-hover-border);
    color: rgba(255, 255, 255, 0.88);
}

.theme-toggle__option:focus-visible {
    outline: calc(var(--axing-outline-width) * 1.5) solid var(--axing-theme-toggle-focus-color);
    outline-offset: -1px;
    z-index: 3;
}

.theme-toggle__option[aria-pressed="true"] {
    background: var(--axing-primary-hover-background);
    border-color: var(--axing-primary-hover-border);
    color: var(--axing-primary-inverse);
}

.theme-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
}

.theme-toggle__icon::before {
    content: "";
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 18px 18px;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 24px 24px;
    transition: filter 0.2s ease;
}

.theme-toggle__icon--system::before {
    -webkit-mask-image: var(--axing-icon-theme-system);
    mask-image: var(--axing-icon-theme-system);
}

.theme-toggle__icon--sun::before {
    -webkit-mask-image: var(--axing-icon-theme-sun);
    mask-image: var(--axing-icon-theme-sun);
}

.theme-toggle__icon--moon::before {
    -webkit-mask-image: var(--axing-icon-theme-moon);
    mask-image: var(--axing-icon-theme-moon);
    -webkit-mask-size: 19px 19px;
    mask-size: 19px 19px;
}

.theme-toggle__option:hover .theme-toggle__icon {
    transform: scale(1.04);
}

.theme-toggle__option:hover .theme-toggle__icon::before {
    filter: saturate(1.2);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle__option,
    .theme-toggle__icon,
    .theme-toggle__icon::before {
        transition: none;
    }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
:is(button:not(.theme-toggle__option), [type="button"]:not(.theme-toggle__option), [type="submit"], [type="reset"], [role="button"]) {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--axing-control-min-height);
    padding: var(--axing-button-padding);
    border: 1px solid var(--axing-primary-border);
    border-radius: var(--axing-border-radius);
    background: var(--axing-primary-background);
    color: var(--axing-control-text-inverse);
    font-family: var(--axing-font-family);
    font-size: var(--axing-font-size);
    font-weight: 600;
    line-height: var(--axing-line-height);
    text-align: center;
    cursor: pointer;
    transition: var(--axing-transition-button);
}

:is(button:not(.theme-toggle__option), [type="button"]:not(.theme-toggle__option), [type="submit"], [type="reset"], [role="button"]):not(:disabled):focus-visible {
    outline: none;
    box-shadow: var(--axing-focus-ring);
}

:is(button:not(.theme-toggle__option), [type="button"]:not(.theme-toggle__option), [type="submit"], [type="reset"], [role="button"]):not(:disabled):is(:hover, :focus-visible, :active) {
    background: var(--axing-primary-hover-background);
    border-color: var(--axing-primary-hover-border);
}

:is(button:not(.theme-toggle__option), [type="button"]:not(.theme-toggle__option), [type="submit"], [type="reset"], [role="button"]):not(:disabled):active {
    transform: translateY(1px);
}

:is(button:not(.theme-toggle__option), [type="button"]:not(.theme-toggle__option), [type="submit"], [type="reset"], [role="button"]).outline {
    background: transparent;
    color: var(--axing-primary);
    border-color: var(--axing-primary-border);
}

:is(button:not(.theme-toggle__option), [type="button"]:not(.theme-toggle__option), [type="submit"], [type="reset"], [role="button"]).outline:not(:disabled):is(:hover, :active, :focus, :focus-visible) {
    background: var(--axing-green-soft);
    color: var(--axing-primary-hover);
    border-color: var(--axing-primary-hover-border);
}

/* ==========================================================================
   Form Foundations
   ========================================================================== */
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: var(--axing-font-family);
    font-size: var(--axing-font-size);
    line-height: var(--axing-line-height);
    letter-spacing: inherit;
}

input {
    overflow: visible;
}

select {
    text-transform: none;
}

legend {
    max-width: 100%;
    padding: 0;
    color: inherit;
    white-space: normal;
}

textarea {
    overflow: auto;
    resize: vertical;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

::-ms-expand {
    display: none;
}

:is([type="file"], [type="range"]) {
    padding: 0;
    border-width: 0;
}

:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea) {
    min-height: var(--axing-control-min-height);
}

/* ==========================================================================
   Fieldsets And Details
   ========================================================================== */
fieldset {
    width: 100%;
    margin: 0 0 var(--axing-spacing);
    padding: var(--axing-fieldset-padding);
    border: 1px solid var(--axing-field-border, var(--axing-form-element-border-color));
    border-radius: var(--axing-border-radius);
}

details {
    margin: 0;
    padding: 0;
}

details > summary {
    display: block;
    padding-left: 1.25rem;
    cursor: pointer;
    color: var(--axing-color);
    font-weight: 600;
    list-style: none;
    position: relative;
}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask-image: var(--axing-icon-chevron);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 1rem auto;
    mask-image: var(--axing-icon-chevron);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 1rem auto;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    transition: transform 0.15s ease;
}

details[open] > summary::before {
    transform: translateY(-50%) rotate(0deg);
}

details[open] > summary {
    margin-bottom: 0.5rem;
}

details > summary + p {
    margin-top: 0;
}

details > :last-child {
    margin-bottom: 0;
}

fieldset legend,
label {
    margin-bottom: calc(var(--axing-spacing) * 0.375);
    color: var(--axing-color);
    font-weight: var(--axing-font-weight);
}

fieldset legend {
    margin-bottom: calc(var(--axing-spacing) * 0.5);
}

/* ==========================================================================
   Textual Form Controls
   ========================================================================== */
:is(
    button:not(.theme-toggle__option),
    [type="button"]:not(.theme-toggle__option),
    [type="submit"],
    [type="reset"],
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
    select,
    textarea
) {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: var(--axing-control-padding);
}

[type="file"] {
    width: 100%;
}

:is(input, select, textarea) {
    --axing-field-background: var(--axing-form-element-background-color);
    --axing-field-border: var(--axing-form-element-border-color);
    --axing-field-color: var(--axing-form-element-color);
    --axing-field-shadow: none;
    border: 1px solid var(--axing-field-border);
    border-radius: var(--axing-border-radius);
    outline: 0;
    background-color: var(--axing-field-background);
    box-shadow: var(--axing-field-shadow);
    color: var(--axing-field-color);
    font-weight: var(--axing-font-weight);
    transition: var(--axing-transition-fast);
}

:is(select, textarea, input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"])):not([readonly], :disabled):is(:hover, :focus-visible) {
    --axing-field-background: var(--axing-form-element-active-background-color);
    --axing-field-border: var(--axing-primary-border);
}

:is(select, textarea, input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"])):not([readonly], :disabled):is(:active, :focus) {
    --axing-field-background: var(--axing-form-element-active-background-color);
    --axing-field-border: var(--axing-primary-border);
}

:is(select, textarea, input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"])):not([readonly], :disabled):is(:focus, :focus-visible) {
    --axing-field-shadow: var(--axing-focus-ring);
}

fieldset[disabled] :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea),
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
label[aria-disabled="true"],
select[disabled],
textarea[disabled] {
    opacity: var(--axing-disabled-opacity);
    pointer-events: none;
}

input::placeholder,
select:invalid,
textarea::placeholder {
    color: var(--axing-form-element-placeholder-color);
    opacity: 1;
}

select:not([multiple], [size]) {
    padding-right: calc(var(--axing-select-chevron-offset) + 1.5rem);
    background-image: var(--axing-icon-chevron);
    background-position: center right var(--axing-select-chevron-offset);
    background-size: 1rem auto;
    background-repeat: no-repeat;
}

select[multiple] option:checked {
    background: var(--axing-form-element-selected-background-color);
    color: var(--axing-form-element-color);
}

:where(input, select, textarea, fieldset, .grid) + small {
    display: block;
    width: 100%;
    margin-top: calc(var(--axing-spacing) * -0.75);
    margin-bottom: var(--axing-spacing);
    color: var(--axing-muted-color);
}

label > :where(input, select, textarea) {
    margin-top: calc(var(--axing-spacing) * 0.25);
}

label:has([type="checkbox"], [type="radio"]) {
    width: fit-content;
    cursor: pointer;
}

/* ==========================================================================
   Checkboxes And Radios
   ========================================================================== */
:is([type="checkbox"], [type="radio"]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--axing-checkbox-size);
    height: var(--axing-checkbox-size);
    margin-top: -0.125em;
    margin-right: 0.125em;
    border: 1px solid var(--axing-field-border, var(--axing-form-element-border-color));
    border-radius: var(--axing-checkbox-radius);
    background-color: var(--axing-form-element-background-color);
    vertical-align: middle;
    cursor: pointer;
    transition: var(--axing-transition-fast);
}

:is([type="checkbox"], [type="radio"])::-ms-check {
    display: none;
}

:is([type="checkbox"], [type="radio"]):is(:focus, :focus-visible) {
    border-color: var(--axing-primary-border);
    box-shadow: var(--axing-focus-ring);
}

:is([type="checkbox"], [type="radio"]):not(:disabled):is(:hover, :focus-visible) {
    border-color: var(--axing-primary-border);
}

:is([type="checkbox"], [type="radio"]):checked {
    border-color: var(--axing-primary-border);
    background-color: var(--axing-primary-background);
    background-image: var(--axing-icon-checkbox);
    background-position: center;
    background-size: 0.85em auto;
    background-repeat: no-repeat;
}

[type="checkbox"]:indeterminate {
    border-color: var(--axing-primary-border);
    background-color: var(--axing-primary-background);
    background-image: var(--axing-icon-minus);
    background-position: center;
    background-size: 0.85em auto;
    background-repeat: no-repeat;
}

[type="radio"] {
    border-radius: 50%;
}

[type="radio"]:checked {
    border-width: 0.35em;
    background-color: var(--axing-form-element-active-background-color);
    background-image: none;
}

/* ==========================================================================
   File Input
   ========================================================================== */
[type="file"] {
    padding: 0;
    border: 1px solid var(--axing-form-element-border-color);
    border-radius: var(--axing-border-radius);
    background: var(--axing-form-element-background-color);
    box-shadow: none;
    color: var(--axing-form-element-color);
}

[type="file"]::file-selector-button {
    margin: -1px;
    margin-right: var(--axing-file-button-gap);
    min-height: var(--axing-control-min-height);
    padding: var(--axing-button-padding);
    border: 1px solid var(--axing-primary-border);
    border-radius: var(--axing-border-radius) 0 0 var(--axing-border-radius);
    background: var(--axing-primary-background);
    color: var(--axing-control-text-inverse);
    font-family: var(--axing-font-family);
    font-size: var(--axing-font-size);
    font-weight: 600;
    line-height: var(--axing-line-height);
    cursor: pointer;
    transition: var(--axing-transition-button);
}

[type="file"]:not(:disabled):is(:hover, :active, :focus, :focus-visible)::file-selector-button {
    border-color: var(--axing-primary-hover-border);
    background: var(--axing-primary-hover-background);
}

[type="file"]:not(:disabled):is(:focus, :focus-visible)::file-selector-button {
    box-shadow: var(--axing-focus-ring);
}

/* ==========================================================================
   Range And Progress
   ========================================================================== */
[type="range"] {
    display: block;
    accent-color: var(--axing-primary);
}

[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--axing-checkbox-size);
    height: var(--axing-checkbox-size);
    border: 1px solid var(--axing-primary-border);
    border-radius: 50%;
    background: var(--axing-primary-background);
}

[type="range"]::-webkit-slider-runnable-track {
    border-radius: 999px;
}

[type="range"]::-moz-range-thumb {
    width: var(--axing-checkbox-size);
    height: var(--axing-checkbox-size);
    border: 1px solid var(--axing-primary-border);
    border-radius: 50%;
    background: var(--axing-primary-background);
}

[type="range"]::-moz-range-track {
    border-radius: 999px;
}

progress {
    display: block;
}

/* ==========================================================================
   Table
   ========================================================================== */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--axing-form-element-border-color);
    border-radius: var(--axing-border-radius);
    overflow: hidden;
}

th,
td {
    padding: var(--axing-control-padding);
    text-align: left;
    border-bottom: 1px solid var(--axing-form-element-border-color);
    white-space: nowrap;
}

thead th {
    background: var(--axing-green-soft);
    color: var(--axing-color);
    font-weight: 600;
}

thead th:first-child {
    border-top-left-radius: var(--axing-border-radius);
}

thead th:last-child {
    border-top-right-radius: var(--axing-border-radius);
}

tbody th {
    font-weight: 600;
}

tbody tr:last-child > :first-child {
    border-bottom-left-radius: var(--axing-border-radius);
}

tbody tr:last-child > :last-child {
    border-bottom-right-radius: var(--axing-border-radius);
}

tbody tr:last-child th,
tbody tr:last-child td {
    border-bottom: 0;
}

label > :is([type="range"], progress) {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 0 0 var(--axing-spacing);
}

/* ==========================================================================
   Responsive Control Width
   ========================================================================== */
@media (min-width: 576px) {
    :is(
        button:not(.theme-toggle__option),
        [type="button"]:not(.theme-toggle__option),
        [type="submit"],
        [type="reset"],
        [type="file"],
        input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
        select,
        textarea
    ) {
        width: auto;
    }
}

/* ==========================================================================
   Grouped Controls
   ========================================================================== */
:is([role="group"], [role="search"]):not(.theme-toggle) {
    display: inline-flex;
    position: relative;
    margin: 0;
    border-radius: var(--axing-border-radius);
    box-shadow: var(--axing-group-box-shadow);
    vertical-align: middle;
    transition: box-shadow var(--axing-transition);
}

:is([role="group"], [role="search"]):not(.theme-toggle) :is(input:not([type="checkbox"], [type="radio"]), select),
:is([role="group"], [role="search"]):not(.theme-toggle) > * {
    position: relative;
    flex: 1 1 auto;
    margin-bottom: 0;
}

:is([role="group"], [role="search"]):not(.theme-toggle) :is(input:not([type="checkbox"], [type="radio"]), select):not(:first-child),
:is([role="group"], [role="search"]):not(.theme-toggle) > :not(:first-child) {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

:is([role="group"], [role="search"]):not(.theme-toggle) :is(input:not([type="checkbox"], [type="radio"]), select):not(:last-child),
:is([role="group"], [role="search"]):not(.theme-toggle) > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

:is([role="group"], [role="search"]):not(.theme-toggle) :is(input:not([type="checkbox"], [type="radio"]), select):focus,
:is([role="group"], [role="search"]):not(.theme-toggle) > *:focus {
    z-index: 2;
}

:is([role="group"], [role="search"]) :is([role="button"], [type="button"], [type="reset"], [type="submit"], button, input:not([type="checkbox"], [type="radio"]), select):not(:first-child) {
    margin-left: calc(var(--axing-border-width) * -1);
}

:is([role="group"], [role="search"]) :is([role="button"], [type="button"], [type="reset"], [type="submit"], button) {
    width: auto;
}

@supports selector(:has(*)) {
    :is([role="group"], [role="search"]):has(:is(button, [type="submit"], [type="button"], [role="button"]):focus) {
        --axing-group-box-shadow: 0 0 0 var(--axing-outline-width) var(--axing-primary-focus);
    }

    :is([role="group"], [role="search"]):has(:is(button, [type="submit"], [type="button"], [role="button"]):focus) :is(input:not([type="checkbox"], [type="radio"]), select) {
        border-color: transparent;
    }

    :is([role="group"], [role="search"]):has(:is(input:not([type="submit"], [type="button"]), select):focus) {
        --axing-group-box-shadow: 0 0 0 0.0625rem var(--axing-form-element-border-color);
    }

    :is([role="group"], [role="search"]) :is([role="button"], [type="button"], [type="reset"], [type="submit"], button):focus {
        box-shadow: none;
    }
}