// there is no need to implement navigation-drawer
// just use side-sheet and portal it to document.body

// https://m3.material.io/components/navigation-bar/specs
.sd-navigation_bar {
    padding-top: 12px;
    padding-bottom: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    gap: 4px;
    background: var(--md-sys-color-surface-container);
}

// https://m3.material.io/components/navigation-rail/
.sd-navigation_rail {
    box-sizing: border-box;
    width: 80px;
    height: 100%;
    background: var(--md-sys-color-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 64px;
    &-fab {
        flex-shrink: 0;
    }
    &-items {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
}

// helper
.sd-navigation_helper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; // remove webkit blue tap effect
    transition: all 200ms;
    text-align: center;

    .sd-navigation_helper-icon {
        display: inline-block;
        transition: all 200ms;
        border-radius: 4rem;
    }

    .sd-navigation_helper-label_text {
        transition: all 200ms;
        font-size: x-small;
        display: inline;
        width: 100%;
        height: 100%;
        font-weight: 500;
    }

    &[data-sd-active='false'] {
        .sd-navigation_helper-icon,
        .sd-navigation_helper-label_text {
            &,
            & * {
                color: var(--md-sys-color-on-surface-variant);
            }
        }
    }

    &[data-sd-active='true'] {
        .sd-navigation_helper-icon,
        .sd-navigation_helper-label_text {
            &,
            & * {
                color: var(--md-sys-color-on-surface);
            }
        }
    }

    &-active_indicator {
        @include display-flex-center;
        display: flex !important;
        flex-shrink: 0;
        box-sizing: border-box;
        width: 64px;
        height: 32px;
        border-radius: 40px;
        -webkit-tap-highlight-color: transparent; // remove webkit blue tap effect
        overflow: hidden;
        transition: all 200ms;
        svg {
            height: 18px;
            vertical-align: middle;
        }
    }

    &[data-sd-hover='true'] {
        .sd-navigation_helper-active_indicator {
            background: rgb(0 0 0 / 0.04);
        }
    }

    &[data-sd-active='true'] {
        .sd-navigation_helper-active_indicator {
            background: var(--md-sys-color-secondary-container);
            animation: sd-navigation_helper-active_indicator 100ms ease-out;
        }
    }
}

@keyframes sd-navigation_helper-active_indicator {
    from {
        clip-path: circle(16px);
    }
    to {
        clip-path: circle(32px);
    }
}