public-ui-kolibri

@use '../../mixins/to-rem' as *; @layer kol-theme-component { .kol-nav { $root: &; &__navigation { background-color: var(--color-blue); } &__list { display: flex; margin: 0; padding: 0; list-style: none; &--vertical { flex-direction: column; } } &__list-item { border-color: var(--color-blue-75); border-style: solid; border-width: 0; &:not(:first-child), #{$root}__list--nested & { border-top-width: to-rem(2); } } &__entry { flex-grow: 1; } &__expand-button { .kol-button { background-color: var(--color-blue-130); height: 100%; margin: auto; } &--expanded .kol-icon::part(icon)::before { content: '\eab4'; } &:not(&--expanded) .kol-icon::part(icon)::before { content: '\eab6'; } } &__toggle-button { .kol-button { $root: &; outline: none; text-decoration: none; appearance: none; &:focus { outline: var(--text-focus-outline-color) solid to-rem(2); outline-offset: -4px; } --text-focus-outline-color: var(--color-black); &--ghost { --text-background-color: transparent; --text-border-color: transparent; --text-color: var(--color-blue); &:focus { --text-focus-outline-color: var(--color-blue); } &:hover { --text-background-color: unset; --text-border-color: transparent; --text-color: var(--color-blue-130); } } &__text { color: var(--text-color) !important; background-color: var(--text-background-color); border-color: var(--text-border-color); border-style: solid; border-radius: 0; min-width: to-rem(44); min-height: to-rem(44); margin: 0; padding: 0.25em 0.75em; border-width: 2px; font-weight: var(--font-weight-bold); line-height: 1.2; text-decoration: none !important; @at-root #{$root}--ghost:focus & { outline-offset: -2px; } } } } } .kol-link { text-decoration: none; } .kol-span { color: var(--color-white); border-color: transparent; border-style: solid; height: 100%; padding: to-rem(16); border-width: 2px; justify-items: start; font-size: to-rem(18); :is(.kol-button, .kol-link):focus-within & { border-color: var(--color-white); } :is(.kol-button, .kol-link):focus-within &, :is(.kol-button, .kol-link):hover & { text-decoration: underline; } } }