noesya/osuny

.navbar
    .btn
        color: $gray-300
        &:hover
            background: $gray-800

.popin-menu
    background: black
    border-radius: var(--bs-border-radius)
    color: $color-white
    font-family: $font-family-sans-serif !important
    margin: 0.5rem
    overflow-y: scroll
    padding: 1rem
    position: absolute
    z-index: 1000
    a
        color: $color-white
        &:hover
            color: $gray-100
    hr
        color: $gray-700
        margin-left: -1rem
        margin-right: -1rem
    .image
        border-radius: 100%
        margin-bottom: 20px
        width: 100px
    ul
        list-style-type: none
        margin-bottom: 0
        padding: 0
        li
            padding-bottom: 5px
            &.section
                margin-top: 2rem
            &.disabled
                opacity: 0.2
        > li.section:first-of-type
            margin-top: 0
    .menu-content
        .row
            > div
                min-width: 250px
    .section
        color: $gray-500
        font-size: pxToRem(15)
        margin-bottom: 0.5rem
        text-transform: uppercase
    &#menu-profile,
    &#menu-language
        right: 0
    &#menu-language
        ul
            margin-bottom: 0
            li
                list-style: none
                a
                    color: $color-white
                &.active
                    color: $gray-500
    &#menu-profile
        min-width: 350px
        .profile
            &__name
                margin-bottom: 0
            &__email
                color: $gray-500

.commands
    backdrop-filter: blur(6px)
    background: $color-commands
    @media screen and ( min-height: 500px )
        bottom: 0
        left: 0
        position: fixed
        right: 0
        z-index: 100

nav[aria-label="breadcrumb"]
    margin-left: calc(-1 * var(--bs-gutter-x))
    margin-right: calc(-1 * var(--bs-gutter-x))
    overflow-x: scroll
    padding-left: var(--bs-gutter-x)
    padding-right: var(--bs-gutter-x)
    .breadcrumb
        align-items: center
        flex-wrap: nowrap
        *
            color: $color-text-alt !important
        .breadcrumb-item
            flex-shrink: 0
            white-space: nowrap
            &:last-of-type
                padding-right: var(--bs-gutter-x)

.subnav
    border-bottom: 1px solid $color-bg-soft
    padding-bottom: 0
    padding-top: 0
    .navbar-toggler
        border: none
        padding-left: 0
        a
            color: $color-text-alt
    @include media-breakpoint-down(sm)
        #subnav
            margin-bottom: 10px
        a
            display: block
            border-left-color: transparent
            border-left-style: solid
            border-left-width: 5px
            margin-left: calc(-1 * var(--bs-gutter-x))
            padding-bottom: 5px
            padding-left: calc(var(--bs-gutter-x) - 5px)
            padding-top: 5px
            &.active
                border-left-color: $color-black
                color: $color-black
    @include media-breakpoint-up(sm)
        #subnav
            justify-content: center
        a
            border-top-color: transparent
            border-top-style: solid
            border-top-width: 5px
            display: inline-block
            line-height: 100%
            margin: 0 30px
            padding-bottom: 20px
            padding-top: 15px
            &:hover
                color: $color-black
            &.active
                border-top-color: $color-black
                color: $color-black

.feature-nav
    line-height: 100%
    a
        color: $color-flexoki-600
        font-family: $font-family-serif
    h1, a
        display: inline-block
        font-size: $h1-font-size !important
        line-height: 100%
        margin-bottom: 0
        margin-right: pxToRem(40)
        margin-top: 0

#menu-main
    .menu-content
        li
            > span
                opacity: 0.3