.Menu {
    display: flex;
    flex-direction: column;
    justify-content: center;

    --bgColor: #fff;
    --fgColor: var(--color-base);
    --fgColorFaint: var(--color-base-faint);
    --fgColorAccent: var(--color-base);
    --gap: 3px;
    --padding: calc(var(--base-gap) * .5);

    color: var(--fgColor);

    &.horizontal {
        flex-direction: row;
        gap: var(--base-gap) !important;
    }

    > .MenuOption {
        position: relative;

        cursor: pointer;
        text-decoration: none;

        width: 100%;
        box-sizing: border-box;

        > .body {
            display: flex;
            gap: var(--gap);

            max-width: min(calc(100vw - 3em), 400px);

            color: var(--fgColor);

            background-color: var(--bgColor);

            padding: var(--padding);
            border-radius: var(--border-radius);

            > .Icon {
                flex-shrink: 0;
                grid-area: icon;
                margin-right: 5px;
            }

            > .texts {

                display: flex;
                flex-direction: column;
                gap: var(--gap);

                > .title {
                    grid-area: title;
                    line-height: var(--font-line-height-short);
                }

                > .subTitle {
                    color: var(--fgColorFaint);
                    line-height: var(--font-line-height-short);
                    grid-area: subTitle;
                    white-space: wrap;
                }

            }

        }

        &.big {
            --padding: calc(var(--base-gap) * 1);
            > .body {

                > .Icon {
                    margin-right: 7px;
                }

                > .texts:has(.subTitle) {
                    > .title {
                        font-weight: 600;
                    }
                }
            }
        }

        &:hover {
            --bgColor: var(--color-base-faintest-2);
            --fgColor: var(--fgColorAccent);
        }
    }

    > .MenuOption:has(.Dropdown) {

        > .Dropdown {
            position: absolute;
            left: -.2em;

            opacity: 0;
            pointer-events: none;

            transition: all var(--transition-animation-ms);

            top: 50%;
        }

        &:hover > .Dropdown,
        &:focus-within > .Dropdown{
            opacity: 1;
            pointer-events: all;
            top: 100%;
        }
    }

}