49 lines
1.1 KiB
SCSS
49 lines
1.1 KiB
SCSS
@use './variables' as *;
|
||
@use './globals';
|
||
|
||
.language-toggle {
|
||
display: flex;
|
||
gap: 0.25rem;
|
||
background: transparent;
|
||
border: 1px solid rgba(230, 241, 251, 0.35); // light on always-dark navbar
|
||
border-radius: $border-radius-sm;
|
||
padding: 0.25rem;
|
||
|
||
&__button {
|
||
padding: 0.375rem 0.75rem;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
border: none;
|
||
border-radius: 0.25rem;
|
||
background: transparent;
|
||
color: var(--color-text-on-dark); // #E6F1FB – 10:1 on #042C53 navbar
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
background: rgba(230, 241, 251, 0.1);
|
||
color: var(--color-text-on-dark);
|
||
}
|
||
|
||
&:focus {
|
||
outline: 2px solid var(--color-accent-deco); // ochre – always visible on dark
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
&:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
&--active {
|
||
background: var(--color-text-on-dark); // #E6F1FB bg → 10:1 contrast
|
||
color: #042c53; // night-blue text on light bg → AAA
|
||
font-weight: 600;
|
||
|
||
&:hover {
|
||
background: var(--color-text-on-dark);
|
||
color: #042c53;
|
||
}
|
||
}
|
||
}
|
||
}
|