2024-05-02 16:21:37 +00:00
|
|
|
// Use :where to reset specificity to 0
|
|
|
|
|
// https://css-tricks.com/using-the-specificity-of-where-as-a-css-reset/
|
|
|
|
|
:where(
|
|
|
|
|
// skip React Button element
|
|
|
|
|
button:not(.btn, [type=checkbox], [type=radio]),
|
|
|
|
|
input:is([type=button], [type=submit])
|
|
|
|
|
) {
|
2024-03-02 07:51:55 +00:00
|
|
|
@include windows-form-element;
|
|
|
|
|
|
|
|
|
|
padding: 4px 11px 6px 11px;
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
|
|
|
|
|
&[default] {
|
|
|
|
|
color: var(--accent-white);
|
|
|
|
|
|
|
|
|
|
&:not([disabled]) {
|
|
|
|
|
--color-form-element-background: var(--accent-blue);
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
--color-form-element-background: rgba(64, 114, 229, 0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
--color-form-element-background: rgba(64, 114, 229, 0.8);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include focus-ring;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&[disabled] {
|
|
|
|
|
@include light-dark(--color-form-element-background, var(--fill-tertiary), var(--fill-quaternary));
|
|
|
|
|
--color-form-element-border: linear-gradient(transparent, transparent);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
