47 lines
1 KiB
CSS
47 lines
1 KiB
CSS
.button {
|
|
color: var(--button-text, var(--color-text));
|
|
background-color: var(--button-bg, var(--color-bg));
|
|
border: 2px solid var(--button-border, var(--color-text));
|
|
border-radius: var(--border-radius);
|
|
display: inline-block;
|
|
font: inherit;
|
|
padding: 0.3rem var(--space-s);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.button:hover,
|
|
.button[aria-current='page'],
|
|
.button[aria-pressed='true'],
|
|
.button[data-state='active'] {
|
|
background-size: 150% 150%;
|
|
--button-bg: var(--color-text);
|
|
--button-text: var(--color-bg);
|
|
--button-border: var(--color-text);
|
|
}
|
|
|
|
.button:active {
|
|
transform: scale(99%);
|
|
}
|
|
|
|
.button:where(:has(svg)) {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
align-items: center;
|
|
}
|
|
|
|
.button:where(:has(.visually-hidden)) {
|
|
border-radius: 50%;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
/* all buttons have a min size */
|
|
.button:where(:not(:has(svg))) {
|
|
text-align: center;
|
|
min-inline-size: 6ch;
|
|
}
|
|
|
|
.button:where(:not(:has(.visually-hidden))) {
|
|
padding: var(--button-padding, 0.35em 1em);
|
|
}
|