@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);
                            }
                        }
                    }
                }
            }
        }
    }
}