// 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(--sd-sys-color-surface-container);
}

// https://m3.material.io/components/navigation-rail/
.sd-navigation_rail {
    box-sizing: border-box;
    width: 80px;
    height: 100%;
    background: var(--sd-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 {
        transition: all 200ms;
        border-radius: 4rem;
        color: var(--sd-sys-color-on-surface);
        &:hover {
            box-shadow: none;
        }
    }
    .sd-navigation_helper-label_text {
        transition: all 200ms;
        font-size: x-small;
        display: inline;
        width: 100%;
        height: 100%;
    }

    &[data-sd-active='true'] {
        .sd-navigation_helper-icon {
            font-weight: bold;
        }
        .sd-navigation_helper-label_text {
            font-weight: bold;
        }
    }
}