.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;

        &.alignLeft {
            justify-content: flex-start;
        }

        &.alignRight {
            justify-content: flex-end;
        }
    }

    > .menuHeader {
        font-size: var(--font-size-smallerest);
        font-weight: 500;
        color: var(--color-base-faint);
        padding: 0 calc(var(--base-gap) + 2px); /* Add some px to optically align with icon in menu option below */
        text-transform: uppercase;
    }

    > .MenuOption {
        position: relative;

        cursor: pointer;
        text-decoration: none;

        box-sizing: border-box;

        user-select: none;

        --padding: calc(var(--base-gap) * .6) var(--base-gap);

        > .body {
            position: relative;

            display: flex;
            align-items: center;
            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);

            font-size: var(--font-size-small);

            > .Icon {
                flex-shrink: 0;
                grid-area: icon;

                &.left {
                    margin-right: 5px;
                }

                &.right {
                    margin-left: 5px;
                }
            }

            > .texts {

                display: flex;
                flex-direction: column;
                font-weight: var(--button-font-weight);

                > .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: var(--base-gap);

            > .body {
                align-items: flex-start;

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

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

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

    > .MenuOption:has(.Dropdown) {

        > .Dropdown {
            position: absolute;

            opacity: 0;
            pointer-events: none;

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

            top: 50%;
        }

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

    > .MenuOption.featured {
        --bgColor: var(--color-primary);
        --fgColor: #fff;

        &:hover {
            --bgColor: var(--color-primary-lighter);
        }
    }

    > .MenuOption.selected {
        --fgColor: var(--color-primary);
        & > .body > .texts > .title {
            font-weight: 500;
        }
    }

    > .MenuOption.disabled {
        --fgColor: var(--color-base-fainter);
        pointer-events: none;

        &:hover {
            --fgColor: var(--color-primary-lighter);
        }
    }

}

.MenuOption.loading {
    pointer-events: none;

    & > .body > .Icon > div {
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzogYXV0bzsgZGlzcGxheTogYmxvY2s7IGJhY2tncm91bmQ6IHRyYW5zcGFyZW50OyIgd2lkdGg9IjE4NiIgaGVpZ2h0PSIxODYiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48Y2lyY2xlIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWRhc2hhcnJheT0iNDMuOTgyMjk3MTUwMjU3MTA0IDQzLjk4MjI5NzE1MDI1NzEwNCIgc3Ryb2tlPSIjYmNjN2VjIiBzdHJva2Utd2lkdGg9IjQiIHI9IjI4IiBjeT0iNTAiIGN4PSI1MCI+CiAgPGFuaW1hdGVUcmFuc2Zvcm0gdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHR5cGU9InJvdGF0ZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIj48L2FuaW1hdGVUcmFuc2Zvcm0+CjwvY2lyY2xlPjxnPjwvZz48L2c+PCEtLSBbbGRpb10gZ2VuZXJhdGVkIGJ5IGh0dHBzOi8vbG9hZGluZy5pbyAtLT48L3N2Zz4=") !important;
        mask-size: 140%;
        mask-position: center;
    }
}

.MenuOption > .body > .Icon.dropdownIcon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
    --fgColor: var(--color-base-faint);
}

/* Tin.cat / Amazon */
.MenuOption.N5Msn2FsbraT > .body > .Icon.filled {
    background: #FF9900;
}

/* Tin.cat / Elektro3 */
.MenuOption.\39 _agvTaYFpPO > .body > .Icon.filled {
    background: #FEEB19;
    --fgColor: #000;
}

/* Tin.cat / Kindle */
.MenuOption.dtHl9d043tRb > .body > .Icon.filled {
    background: #428FDE;
}

/* Tin.cat / Goodreads */
.MenuOption.G-TrvFoSguJx > .body > .Icon.filled {
    background: #E8E4C9;
    --fgColor: #714520;
}