menu-item {
    display: block;
    position: relative;
    top: 0;
    gap: 0;

    background-color: inherit;

    & > * {
        background-color: inherit;
    }

    & > input {
        display: none;
    }

    & > nav {

        display: flex;
        flex-direction: column;
        border-radius: 5px;
        gap: 10px;
        padding: 10px;
        min-width: 100px;
        & > *:hover {
            cursor: pointer;
            text-decoration: underline;
        }
    }

    @media (min-width: 701px) {

        & > nav {
            background-color: var(--menu-bar-color, canvas);
            color: var(--menu-bar-text-color, inherit);
        }

        &::after {
            font: var(--fa-font-solid);
            width: 2ch;
            height: 3ch;
            font-size: 0.9rem;
            padding-left:0.17rem;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.9ch 0.9ch;
            content: "\f0d7";
        }

        & > nav {
            position: absolute;
            margin-top: 10px;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
        }

        &:not(:hover) > nav {
            display: none;
        }
    }


    @media (max-width: 701px) {

        & > input {
            position: absolute;
            right: 0;
            top: 12px;
            width: 21px;
            height: 22px;
            display: inline-block;
            background-color: transparent;
            background-position: 2px 0;
            border-radius: 2px;
            border-width: 1px;
            border-style: solid;
            border-color: transparent;
            background-repeat: no-repeat;
            appearance: none;
            outline: none;
            border:none;
        }

        & > div.image-div {
            position: absolute;
            right: 0;
            top: 14px;
            width: 21px;
            height: 22px;
            display: inline-block;
            pointer-events: none;
            font: var(--fa-font-solid);
            &::after {
                content: "\2b";
            }
        }

        & {
            border: solid 1px currentColor;
            padding-right: 30px;
            border-radius: 5px;
        }

        & > input:not(:checked) {
            background-position: 2px 0;
            & ~ nav {
                display: none;
            }
        }
        & > input:checked {
            background-position: 2px 0;
            & ~ div.image-div {
                &::after {
                    content: "\f068";
                }
            }
        }
    }
}

menu-items {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 10px;

    & > * {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    @media (min-width: 501px) {

        & > :not(:first-child) {
            position: absolute;
            right: 0;
            top: 2ch;
            background-color: inherit;
            border-radius: 10px;
        }


        &:not(:hover) > :not(:first-child) {
            display: none;
        }
    }
}