form[data-form]
{
    label:has(+ input[required]),
    label:has(+ select[required])
    {
        &:after
        {
            display: inline-block;
            content: '*';
            padding-left: 4px;
        }
    }

    /* Button loader */
    .submit-button-spinner
    {
        --color-background: #fff;
        --color-foreground: #647A6E;
        --size: 0.5px;

        width: calc(48 * var(--size));
        height: calc(48 * var(--size));
        border: calc(5 * var(--size)) solid var(--color-background);
        border-bottom-color: var(--color-foreground);
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: button-spinner 1s linear infinite;
    }

    button[type=submit]
    {
        span.label
        {
            visibility: visible;
        }

        span.submit-button-spinner
        {
            position: absolute;
            display: none;
        }
    }

    button[type=submit]:disabled
    {
        cursor: not-allowed !important;
    }


    /* Loading state */
    &[data-loading]
    {
        button[type=submit]
        {
            span.label
            {
                visibility: hidden;
            }

            span.submit-button-spinner
            {
                display: block;
            }
        }
    }
}

@keyframes button-spinner
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}