52 lines
1.4 KiB
CSS
52 lines
1.4 KiB
CSS
@layer utility {
|
|
.variant--outline-can-hover {
|
|
--outline-fg: var(--brand-bg);
|
|
--outline-fg-hover: var(--brand-bg);
|
|
--outline-fg-active: var(--brand-bg);
|
|
--outline-bg: var(--color-transparent);
|
|
--outline-bg-hover: var(--brand-bg-low);
|
|
--outline-bg-active: var(--brand-bg-low-hover);
|
|
--outline-border-color: var(--brand-bg);
|
|
|
|
color: var(--outline-fg);
|
|
background-color: var(--outline-bg);
|
|
border: solid 1px;
|
|
border-color: var(--outline-border-color);
|
|
|
|
&:hover {
|
|
background-color: var(--outline-bg-hover);
|
|
color: var(--outline-fg-hover);
|
|
}
|
|
}
|
|
.variant--outline-active {
|
|
&:active {
|
|
background-color: var(--outline-bg-active);
|
|
color: var(--outline-fg-active);
|
|
}
|
|
}
|
|
.variant--ghost-can-hover {
|
|
--ghost-fg: var(--brand-bg);
|
|
--ghost-fg-hover: var(--brand-bg);
|
|
--ghost-fg-active: var(--brand-bg);
|
|
--ghost-bg: var(--color-transparent);
|
|
--ghost-bg-hover: var(--brand-bg-low);
|
|
--ghost-bg-active: var(--brand-bg-low-hover);
|
|
--ghost-border-color: var(--color-transparent);
|
|
|
|
color: var(--ghost-fg);
|
|
background-color: var(--ghost-bg);
|
|
border-color: var(--ghost-border-color);
|
|
|
|
&:hover {
|
|
background-color: var(--ghost-bg-hover);
|
|
color: var(--ghost-fg-hover);
|
|
}
|
|
}
|
|
.variant--ghost-active {
|
|
&:active {
|
|
background-color: var(--ghost-bg-active);
|
|
color: var(--ghost-fg-active);
|
|
}
|
|
}
|
|
}
|