﻿/* ==============
button
=============== */

.sb-form .input :is( [type="button"], [type="submit"], [type="reset"], button ):not(.btn) {
    justify-content: center;
    transition: color .3s, border .3s, background .3s ease-out, box-shadow .3s;
    padding: var(--sb-btn-padding);
    width: unset;
    color: var( --sb-btn-color, var(--sb-background) );
    background-color: var( --sb-btn-background, var(--sb-theme-color) );
    background-image: radial-gradient(circle, var(--sb-btn-hover-background, rgba(0, 0, 0, .09)) 50%, transparent 50%);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 0;
    border: var( --sb-btn-border, solid 1px var( --sb-btn-border-color, var( --sb-btn-background, transparent ) ) );
    box-shadow: var(--sb-btn-shadow, none);
}


.sb-form .input > :is( [type="button"], [type="reset"], [type="submit"], button ):not(.btn):is(:hover, :focus) {
    color: var( --sb-btn-hover-color, var( --sb-btn-color, var(--sb-background) ) );
    background-size: 250%;
    border: var( --sb-btn-hover-border, var( --sb-btn-border, 1px solid var( --sb-btn-hover-border-color, var( --sb-btn-border-color, var( --sb-btn-hover-background, var( --sb-btn-background, transparent ) ) ) ) ) );
    box-shadow: var(--sb-btn-hover-shadow, var(--sb-btn-shadow, none));
}

/* ==============
only child button
=============== */

.sb-form .input :is( [type="button"], [type="submit"], [type="reset"], button ):only-child:not(.input > li > *) {
    padding: 0 var(--sb-btn-padding-x);
    font-size: 1.1rem;
    position: absolute;
    inset: 0;
    min-height: 0;
    width: 100%;
}


/* ==============
empty button defaults
=============== */

.sb-form .input ::-ms-reveal {
    display: none;
}

.sb-form .input :is( [type="button"], [type="submit"], [type="reset"], button ).reveal:empty {
    --sb-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M39 5A24 24 0 0 0 9 43l592 464a24 24 0 0 0 30-38l-105-82c39-41 66-86 80-119 3-8 3-16 0-24-15-36-47-88-93-131-47-44-112-81-193-81-68 0-125 26-169 61L39 5zm184 145a144 144 0 0 1 224 175l-39-30a96 96 0 0 0-84-135c-6 0-9 6-7 12a65 65 0 0 1-3 48l-91-70zm150 240a144 144 0 0 1-196-154l-94-74c-23 29-39 59-48 82-4 8-4 16 0 24 14 36 46 88 93 131a263 263 0 0 0 319 48l-74-57z"/></svg>');
    mask-size: 1.3rem;
}

.sb-form .input [type="text"] ~ :is( [type="button"], [type="submit"], [type="reset"], button ).reveal:empty {
    --sb-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 32c-81 0-145 37-193 81-46 43-78 95-92 131-4 8-4 16 0 24 14 36 46 88 92 131 48 44 112 81 193 81s146-37 193-81c46-43 78-95 93-131 3-8 3-16 0-24-15-36-47-88-93-131-47-44-112-81-193-81zM144 256a144 144 0 1 1 288 0 144 144 0 1 1-288 0zm144-64a64 64 0 0 1-84 61c-6-2-12 1-12 7l3 21a96 96 0 1 0 97-121c-6 0-9 6-7 12s3 13 3 20z"/></svg>');
}
