@import url("theme.css");

input,
input:focus,
button,
button:focus {
    flex: 1;
    border: none;
    outline: none;
    padding: .5em;
    margin: .25em;
    border-radius: .25em;
    background-color: transparent;
    color: var(--color-foreground);
}

form>div {
    display: flex;
}

label {
    white-space: nowrap;
    align-self: center;
}

input:invalid {
    background-color: var(--color-background-error, #FAA);
}

input[type=number],
input[type=number]:focus {
    border: solid 2px var(--color-primary, #A0A);
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type=number]:focus {
    border-color: var(--color-primary-light, #F0F);
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

button,
button:focus {
    background: none;
    color: var(--color-foreground-accent, black);
    border: solid 2px var(--color-foreground-accent, black);
    cursor: pointer;
}

button:focus {
    border-color: var(--color-accent);
    @media (forced-colors: active) {
        outline: solid 3px var(--color-accent, #F0F);
    }
}

button[type=submit],
button[type=submit]:focus {
    border: none;
    background-color: var(--color-primary, #F0F);
    color: white;
}

button[type=submit]:focus {
    outline: solid 3px var(--color-primary-light, #FAF);
}

#volume-form-error {
    background-color: var(--color-background-error, #FAA);
    border-left: solid 4px var(--color-error, #F00);
    padding-left: .25em;
}