@import "../../Styles/extra-variables.scss";
@import "../../../Bit.BlazorUI/Styles/functions.scss";
@import "../../../Bit.BlazorUI/Styles/media-queries.scss";

.bit-npn {
    top: 0;
    position: sticky;
    padding: spacing(2);
    overflow: hidden auto;
    background-color: $clr-bg-pri;
    height: $bit-env-height-available;

    &.bit-npn-tgl {
        min-width: spacing(12);
        max-width: spacing(12);

        .bit-npn-cnt {
            align-items: center;
        }
    }

    &.bit-npn-npd {
        padding: 0;

        &.bit-npn-tgl {
            min-width: spacing(6);
            max-width: spacing(6);
        }

        .bit-npn-cnt {
            padding: 0;
        }
    }

    &::-webkit-scrollbar {
        width: 0;
    }

    .bit-srb,
    .bit-srb-cnt {
        width: 100%;
    }

    @include lt-md {
        left: 0;
        padding: 0;
        opacity: 1;
        position: fixed;
        height: unset !important;
        z-index: $zindex-callout;
        bottom: $bit-env-inset-bottom;
        top: $bit-env-inset-top !important;
        transition: transform 150ms ease-out, opacity 100ms ease-in;

        &.bit-rtl {
            right: 0;
            left: unset;
        }

        &.bit-npn-cls {
            opacity: 0;
            transform: translateX(-100%);

            &.bit-rtl {
                transform: translateX(100%);
            }
        }

        &.bit-npn-tgl {
            min-width: spacing(8);
            max-width: spacing(8);
        }

        &.bit-npn-npd.bit-npn-tgl {
            min-width: spacing(6);
            max-width: spacing(6);
        }

        .bit-npn-tbn {
            display: none;
        }
    }
}

.bit-macos .bit-npn {
    height: -webkit-fill-available;

    .bit-npn-cnt {
        height: -webkit-fill-available;
    }
}

.bit-npn-fiw {
    width: fit-content;
}

.bit-npn-fuw {
    width: 100%;
}

.bit-npn-ovl {
    inset: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    min-height: 100vh;
    z-index: $zindex-overlay;
    background-color: $clr-bg-overlay;

    @include gt-sm {
        display: none;
    }
}

.bit-npn-cnt {
    width: auto;
    display: flex;
    gap: spacing(2);
    min-height: 100%;
    height: fit-content;
    padding: spacing(1);
    flex-direction: column;
    background-color: var(--bit-npn-clr-bg);
}

.bit-npn-hdr {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bit-npn-img {
    max-width: spacing(4.75);
    max-height: spacing(4.75);
}

.bit-npn-spc {
    flex-grow: 1;
}

.bit-nav-apri {
    --bit-npn-clr-bg: #{$clr-pri};
}

.bit-nav-asec {
    --bit-npn-clr-bg: #{$clr-sec};
}

.bit-nav-ater {
    --bit-npn-clr-bg: #{$clr-ter};
}

.bit-nav-ainf {
    --bit-npn-clr-bg: #{$clr-inf};
}

.bit-nav-asuc {
    --bit-npn-clr-bg: #{$clr-suc};
}

.bit-nav-awrn {
    --bit-npn-clr-bg: #{$clr-wrn};
}

.bit-nav-aswr {
    --bit-npn-clr-bg: #{$clr-swr};
}

.bit-nav-aerr {
    --bit-npn-clr-bg: #{$clr-err};
}

.bit-nav-apbg {
    --bit-npn-clr-bg: #{$clr-bg-pri};
}

.bit-nav-asbg {
    --bit-npn-clr-bg: #{$clr-bg-sec};
}

.bit-nav-atbg {
    --bit-npn-clr-bg: #{$clr-bg-ter};
}

.bit-nav-apfg {
    --bit-npn-clr-bg: #{$clr-fg-pri};
}

.bit-nav-asfg {
    --bit-npn-clr-bg: #{$clr-fg-sec};
}

.bit-nav-atfg {
    --bit-npn-clr-bg: #{$clr-fg-ter};
}

.bit-nav-apbr {
    --bit-npn-clr-bg: #{$clr-brd-pri};
}

.bit-nav-asbr {
    --bit-npn-clr-bg: #{$clr-brd-sec};
}

.bit-nav-atbr {
    --bit-npn-clr-bg: #{$clr-brd-ter};
}
