:root {
    --form-control-padding-x: var(--space-sm);
    --form-control-padding-y: var(--space-xs);
    --form-control-radius: 0.25em;
    --checkbox-radio-size: 1em;
    --checkbox-radio-translate-y: 0.15em;
    --checkbox-radio-gap: var(--space-xxxs);
    --checkbox-radio-border-width: 2px;
    --checkbox-radio-line-height: var(--body-line-height);
    --radio-marker-size: 8px;
    --checkbox-marker-size: 12px;
    --checkbox-radius: 0.185em;
}
.form-control {
    background-color: var(--color-bg);
    border: 2px solid var(--color-contrast-low);
    transition: 0.3s;
}
.form-control::placeholder {
    opacity: 1;
    color: var(--color-contrast-medium);
}
.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px alpha(var(--color-primary), 0.2);
}
.form-control[aria-invalid="true"] {
    border-color: var(--color-error);
}
.form-control[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 2px alpha(var(--color-error), 0.2);
}
.form-control[disabled] {
    filter: opacity(0.8);
}
.form-control[disabled],
.form-control[readonly] {
    cursor: not-allowed;
}
.form-legend {
    font-size: var(--text-md);
}
.form-label {
    font-size: var(--text-sm);
}

.radio,
.checkbox {
    position: absolute;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
}
.radio + label,
.checkbox + label {
    display: inline-block;
    display: inline-flex;
    align-items: baseline;
    line-height: var(--checkbox-radio-line-height);
    user-select: none;
    cursor: pointer;
}
.radio + label::before,
.checkbox + label::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: var(--checkbox-radio-size);
    height: var(--checkbox-radio-size);
    background-color: var(--color-bg);
    border-width: var(--checkbox-radio-border-width);
    border-color: var(--color-contrast-low);
    border-style: solid;
    margin-right: var(--checkbox-radio-gap);
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s, border 0.2s;
}
.radio:not(:checked):not(:focus) + label:hover::before,
.checkbox:not(:checked):not(:focus) + label:hover::before {
    border-color: var(--color-contrast-medium);
}
@supports (grid-area: auto) {
    .radio + label::before,
    .checkbox + label::before {
        position: relative;
        top: var(--checkbox-radio-translate-y);
    }
}
.radio + label::before {
    border-radius: 50%;
}
.checkbox + label::before {
    border-radius: var(--checkbox-radius);
}
.radio:checked + label::before,
.checkbox:checked + label::before {
    background-color: var(--color-primary);
    box-shadow: none;
    border-color: var(--color-primary);
    transition: transform 0.2s;
}
.radio:active + label::before,
.checkbox:active + label::before {
    transform: scale(0.8);
    transition: transform 0.2s;
}
.radio:checked:active + label::before,
.checkbox:checked:active + label::before {
    transform: none;
    transition: none;
}
.radio:checked + label::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    background-size: var(--radio-marker-size);
}
.checkbox:checked + label::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' stroke-width='2' fill='%23ffffff' stroke='%23ffffff'%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='1,9 5,13 15,3 ' data-cap='butt'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
    background-size: var(--checkbox-marker-size);
}
.radio:checked:active + label::before,
.checkbox:checked:active + label::before,
.radio:focus + label::before,
.checkbox:focus + label::before {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px alpha(var(--color-primary), 0.2);
}
.radio--bg + label,
.checkbox--bg + label {
    padding: var(--space-xxxxs) var(--space-xxxs);
    border-radius: var(--radius-md);
    transition: background 0.2s;
}
.radio--bg + label:hover,
.checkbox--bg + label:hover {
    background-color: var(--color-contrast-lower);
}
.radio--bg:active + label,
.checkbox--bg:active + label,
.radio--bg:focus + label,
.checkbox--bg:focus + label {
    background-color: alpha(var(--color-primary), 0.1);
}
.alert {
    padding: var(--space-xs) var(--space-sm);
    background-color: alpha(var(--color-primary), 0.2);
    border-radius: var(--radius-md);
    color: var(--color-contrast-higher);
    margin: var(--space-sm) 0;
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
}
.alert__link {
    color: inherit;
    text-decoration: underline;
}
.alert__close-btn {
    display: inline-block;
    flex-shrink: 0;
    margin-left: var(--space-sm);
}
.alert__close-btn .icon {
    display: block;
}
.alert--success {
    background-color: alpha(var(--color-success), 0.2);
}
.alert--error {
    background-color: alpha(var(--color-error), 0.2);
}
.alert--warning {
    background-color: alpha(var(--color-warning), 0.2);
}
.alert--is-visible {
    position: static;
    clip: auto;
    clip-path: none;
}
.btn .btn__content-a {
    display: inline-flex;
}
.btn .btn__content-b {
    display: none;
}
.btn__content-a, .btn__content-b {
    align-items: center;
}
.btn--state-b .btn__content-a {
    display: none;
}
.btn--state-b .btn__content-b {
    display: inline-block;
    display: inline-flex;
}
/* preserve button width when switching from state A to state B */
.btn--preserve-width .btn__content-b {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
}
.btn--preserve-width.btn--state-b .btn__content-a {
    display: inline-block;
    display: inline-flex;
    visibility: hidden;
}