/*
 * Primary action button: the only place its look lives.
 * Use class="button" (any element); <button class="submit"> gets the same style.
 * The spinning border is drawn by ::before alone, so no inner markup is needed
 * (the older .dots_border / .text_button children still work).
 */
@property --button-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.button,
button.submit {
    position: relative;
    cursor: pointer;
    border: none;
    background: var(--primary-color);
    color: var(--text-color);
    transition: transform .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
}

/* button.submit keeps the size and corners its page already gives it. */
.button {
    padding: 1rem 2rem;
    border-radius: 7px;
}

/* Spinning light on a 2px ring just outside the button; masked so it never covers the label. */
.button::before,
button.submit::before {
    content: "";
    position: absolute;
    inset: -2px;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--button-angle), transparent 65%, var(--primary-solid, var(--primary-color)));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: button-spin 2s linear infinite;
    pointer-events: none;
}

@keyframes button-spin {
    to { --button-angle: 360deg; }
}

/* Hover swaps to the page background; the label turns primary, pulled toward the theme's text colour so it stays readable on light and dark pages. */
.button:hover:not(:disabled),
.button:focus-visible,
button.submit:hover:not(:disabled),
button.submit:focus-visible {
    background: var(--background-color);
    color: var(--primary-solid, var(--primary-color));
    color: color-mix(in srgb, var(--primary-solid, var(--primary-color)) 60%, var(--background-color-text));
}

.button:active:not(:disabled),
button.submit:active:not(:disabled) {
    transform: scale(.97);
}

.button:disabled,
button.submit:disabled {
    background: rgba(140, 140, 140, .18);
    color: var(--background-color-text);
    opacity: .7;
    cursor: not-allowed;
}

.button:disabled::before,
button.submit:disabled::before {
    display: none;
}

.button .dots_border {
    display: none;
}

.button .text_button {
    position: relative;
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .button::before,
    button.submit::before {
        animation: none;
    }
}