/* ==============
label
=============== */

.sb-form .input label {
    background: var(--sb-label-background, var(--sb-background));
    z-index: 1;
}

    /* inner span for background color */
    .sb-form .input label:not( :is( [type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"] ) ~ label ) > * {
        transition: color .3s ease-out, background .3s ease-out;
        line-height: normal;
        padding: var(--sb-label-padding);
        align-self: center;
        background: transparent;
    }

    .sb-form .input label:not( :is( [type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"] ) ~ label ) {
        transition: font-size .3s ease-out, transform .3s ease-out, left .3s ease-out;
        font-size: 1.1rem;
        color: var(--sb-label-color);
        max-width: 0;
        padding: 0;
        margin: 0 calc(var(--sb-gap-x, var(--sb-gap)) * -1) 0 0;
        white-space: nowrap;
        position: relative;
        left: calc(clamp(5px, calc(var(--sb-border-radius) / 2), 10px) + var(--sb-label-offset-x, 0px));
        pointer-events: none;
        transform: translateY(calc(var(--sb-label-offset-y, 0px)));
    }



/* focus state */
.sb-form .input :is( input:not( [type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"] ), textarea, select ):is(:focus, :not(:placeholder-shown)) ~ label {
    font-size: .75rem;
    left: calc(clamp(5px, calc(var(--sb-border-radius) / 2), 10px) + var(--sb-label-focus-offset-x, 0px));
    transform: translateY(var(--sb-label-focus-offset-y));
}

.sb-form .input :is( input:not( [type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"] ), textarea ):is(:focus, :not(:placeholder-shown)) ~ label > * {
    background: var(--sb-label-background, var(--sb-background));
}

/* invalid state */
.sb-form .input :is( [placeholder]:invalid:not(:required:placeholder-shown), [aria-invalid], [aria-errormessage] ):not([type="checkbox"], [type="radio"]) ~ label {
    animation: error 1.5s linear 0s infinite;
}

/* required symbol */
.sb-form .input :is(:required, [min], [minlength]) ~ label > *::after {
    content: var(--sb-required-text, '*');
    margin-left: 3px;
    color: var(--sb-error-color);
    line-height: 0;
    order: 1;
}