menu-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: auto;
    gap: 5vw;
    white-space: nowrap;
    background-color: inherit;

    &[styler-popup-color] > * {
        --menu-bar-color: var(--styler-popup-color);
    }
    &[styler-popup-text-color] > * {
        --menu-bar-text-color: var(--styler-popup-text-color);
    }

    & > * {
        background-color: inherit;
    }

    & > input:first-of-type {
        display: none;
        & ~ div.image-div {
            display: none;
        }
    }

    & > input:first-of-type ~ * {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: auto;
        gap: var(--menu-bar-item-gap, 5vw);
    }

    & > nav {
        align-items: stretch;
    }

    @media (min-width: 701px) {

        &:not([hide-underline]) {
            & > nav {
                & > * {
                    &::before {
                        content: "";
                        position: absolute;
                        display: block;
                        width: 100%;
                        height: 2px;
                        bottom: 5px;
                        left: 0;
                        background-color: currentColor;
                        transform: scaleX(0);
                        transition: transform 0.3s ease;
                    }

                    &:hover::before {
                        transform: scaleX(1);
                    }
                }
            }    
        }

        & > nav {
            align-content: end ;
            justify-content: space-between;

            & > * {
                padding-top: 10px;
                padding-bottom: 10px;
                position: relative;
                cursor: pointer;
            }

        }
    }


    @media (max-width: 700px) {

        & nav {
            background-color: var(--drawer-color, var(--menu-bar-color, var( --styler-background-color, canvas)));
            color: var(--drawer-text-color, var(--menu-bar-text-color, var(--styler-color, inherit)));
            z-index: 100000;
        }

        & {
            margin-left: auto;
            flex-direction: column;
            place-self: center;
            position: relative;
            width: 20px;
            height: 20px;
            z-index: 100000;
        }

        & > input:first-of-type {
            position: absolute;
            left: 0;
            top: 0;
            align-self: center;
            justify-self: right;
            display: inline-block;
            background-color: transparent;
            background-position: 2px 2px;
            border-radius: 2px;
            border-width: 1px;
            border-style: solid;
            border-color: transparent;
            background-repeat: no-repeat;
            width: 21px;
            height: 22px;
            appearance: none;
            outline: none;
        }

        & > input:first-of-type {
            & ~ div.image-div {
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                pointer-events: none;
                background-color: inherit;
                color: currentColor;
                font: var(--fa-font-solid);
                &::after {
                    content: "\f0c9";
                }
            }
        }

        & > input:first-of-type:checked {
            & ~ div.image-div {
                font: var(--fa-font-solid);
                &::after {
                    content: "\f00d";
                }
            }
        }

        & > input:first-of-type:not(:checked) ~ nav {
            display: none;
        }

        & > input:first-of-type ~ nav {
            position: absolute;
            right: 10px;
            top: 3ch;
            display: flex;
            gap: 0;
            flex-direction: column;
            padding: 10px;
            border-radius: 10px;
            justify-content: start;
            align-content: start;
            align-items: stretch;
            max-width: calc(100vh - 30px);
            box-shadow: var(--menu-box-shadow, 0 6px 9px 6px rgba(0,0,0,.25));
            & > * {
                padding-left: 20px;
                padding-top: 10px;
                padding-bottom: 10px;
            }
        }
    }
}