@use 'sass:map';
@use 'sass:meta';
@use 'sass:string';
@use 'iro-sass/src/bem';
@use 'iro-sass/src/props';
@use '../props' as *;
@forward 'navbar.vars';
@use 'navbar.vars' as vars;
@mixin styles {
@include materialize-at-root(meta.module-variables('vars'));
@include bem.object('navbar') {
display: flex;
block-size: props.get(vars.$block-size);
@include bem.elem('item-content-text') {
margin-inline: props.get(vars.$item--pad-i-label);
}
@include bem.elem('item-content') {
position: relative;
padding-block: props.get(vars.$item--pad-b);
padding-inline: props.get(vars.$item--pad-i);
font-size: props.get(vars.$item--font-size);
color: currentColor;
white-space: nowrap;
border-radius: 100em;
&::after {
position: absolute;
inset: calc(-1 * props.get(vars.$key-focus--border-offset));
z-index: -10;
display: block;
pointer-events: none;
visibility: hidden;
content: '';
border-radius: 100em;
outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width);
box-shadow:
0
0
0
calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
props.get(vars.$default-theme, --key-focus, --outline);
}
}
@include bem.elem('item') {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
inline-size: 100%;
padding-inline: calc(.5 * props.get(vars.$spacing));
font-weight: 500;
color: props.get(vars.$default-theme, --disabled, --label-color);
&:link,
&:visited,
&:enabled {
color: props.get(vars.$default-theme, --label-color);
&:hover,
&:focus-visible {
color: props.get(vars.$default-theme, --hover, --label-color);
@include bem.elem('item-content') {
background-color: props.get(vars.$default-theme, --hover, --bg-color);
}
}
&:focus-visible {
@include bem.elem('item-content') {
&::after {
visibility: visible;
}
}
}
&:active {
color: props.get(vars.$default-theme, --active, --label-color);
@include bem.elem('item-content') {
background-color: props.get(vars.$default-theme, --active, --bg-color);
}
}
}
@include bem.is('selected') {
font-weight: bold;
color: props.get(vars.$default-theme, --selected, --disabled, --label-color);
@include bem.elem('item-content') {
background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
}
&:link,
&:visited,
&:enabled {
color: props.get(vars.$default-theme, --selected, --label-color);
@include bem.elem('item-content') {
background-color: props.get(vars.$default-theme, --selected, --bg-color);
}
&:hover,
&:focus-visible {
color: props.get(vars.$default-theme, --selected, --hover, --label-color);
@include bem.elem('item-content') {
background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
}
}
&:active {
color: props.get(vars.$default-theme, --selected, --active, --label-color);
@include bem.elem('item-content') {
background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
}
}
}
}
}
@include bem.modifier('hide-unselected') {
@include bem.elem('item') {
display: none;
@include bem.is('selected') {
display: flex;
}
}
}
@include bem.modifier('adapt') {
gap: props.get(vars.$spacing);
block-size: 100%;
@include bem.elem('item') {
padding-inline: 0;
}
}
@include bem.modifier('align-block') {
margin-inline: calc(-1 * props.get(vars.$item--pad-i));
}
@include bem.modifier('quiet') {
@include bem.elem('item') {
@include bem.is('selected') {
color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
@include bem.elem('item-content') {
background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
}
&:link,
&:visited,
&:enabled {
color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
@include bem.elem('item-content') {
background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
}
&:hover,
&:focus-visible {
color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
@include bem.elem('item-content') {
background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
}
}
&:active {
color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
@include bem.elem('item-content') {
background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
}
}
}
}
}
}
}
}