// This is used to track hover across frame boundary.
@keyframes menu-active-item {
    // FIXME: Working around an esbuild bug: https://github.com/evanw/esbuild/issues/1665
    to {
        --empty: 0;
    }
}

// Use the animation system to trigger safe area timeouts.
@keyframes menu-safe-area-timeout {
    // FIXME: Working around an esbuild bug: https://github.com/evanw/esbuild/issues/1665
    to {
        --empty: 0;
    }
}

@keyframes menu-disappearing {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes menu-picked {
    from {
        background-color: transparent;
        color: var(--text);
    }

    to {
        background-color: var(--menu-active);
        color: var(--menu-text-active);
    }
}

// Variables are used for the svg background icons, which can't consume css variables.
$menu-text: #222;
$menu-text-active: #fff;
$menu-text-dark: #ccc;
$menu-text-link-dark: #fff;

$menu-caret: #aaa;
$menu-caret-dark: #888;

.menu-fisso {
    // FIXME: prefix vars with menu-fisso
    --corner-radius: 10px;
    --hover-background: rgba(0, 0, 0, 0.05);
    --menu-active: #09f;
    --menu-text-active: #{$menu-text-active};
    --menu-background: #fff;
    --menu-separator: #eee;
    --menu-shadow: rgba(0, 0, 0, 0.1);
    --menu-badge-background: rgba(0, 153, 255, 0.2);
    --menu-badge-background-active: rgba(255, 255, 255, 0.3);
    --menu-badge-color: rgba(0, 153, 255, 1);
    --text: #{$menu-text};
    --text-link: #181818;
    --text-menu: var(--text);
    --text-subtle: #999;
    --text-subtle-active: rgba(255, 255, 255, 0.6);
    // Don't include the Apple Emoji Font since it would show emojis for shortcuts.
    --menu-fisso-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";

    &.menu-fisso-dark {
        // FIXME: prefix vars with menu-fisso
        --hover-background: rgba(255, 255, 255, 0.08);
        --menu-background: #2b2b2b;
        --menu-separator: #363636;
        --menu-shadow: rgba(0, 0, 0, 0.3);
        --text: #{$menu-text-dark};
        --text-link: #{$menu-text-link-dark};
        --text-menu: var(--text);
    }

    font-family: var(--menu-fisso-font-family);

    // We added a max-width for ul (and row too) to make sure that if the text in the menu is too long, we don't make the menu grow to fit all the content, we cut it instead.
    &,
    & ul {
        background-color: var(--menu-background);
        border-radius: var(--corner-radius);
        box-shadow: 0 10px 20px var(--menu-shadow);
        box-sizing: border-box;
        font-size: 12px;
        line-height: 1.2;
        margin: 0;
        padding: 6px 0;
        position: absolute;
        user-select: none;
        z-index: 1;
        width: max-content;
        max-width: 500px;
    }

    &.has-checked-item .inner,
    & .has-checked-item .inner {
        padding-left: 29px;
    }
    & .reset-checked-padding > li > .inner {
        padding-left: 10px;
    }

    &.disappearing {
        animation: 230ms ease-out 90ms menu-disappearing;
    }

    &.disappearing-immediate {
        animation: 230ms ease-out menu-disappearing;
    }

    &.from-menu-bar {
        border-top-left-radius: 0;
    }

    & li {
        display: flex;
        position: relative;

        .inner {
            border-radius: 5px;
            margin: 0 5px;
            color: var(--text-link);
            cursor: default;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            pointer-events: none;
            white-space: pre;
            padding: 6px 7px 6px 10px;
            width: 100%;
            overflow: hidden;
        }

        &:not(.disabled):not(.picked):not(.separator) {
            &:hover {
                // Hack to track hover events across frames.
                animation: 0s menu-active-item;
            }

            &:hover,
            &.hover {
                z-index: 2;

                & > .inner {
                    background-color: var(--menu-active);
                    color: var(--menu-text-active);
                }

                & > .inner .description {
                    color: var(--text-subtle-active);
                }

                & > ul {
                    opacity: 1;
                    pointer-events: auto;
                }

                &.submenu > .inner::after {
                    background-image: svg-load("./caret.svg", stroke=$menu-text-active);
                }

                &.submenu > .safearea.enabled {
                    display: block;

                    &:hover {
                        animation: 350ms menu-safe-area-timeout;
                    }
                }

                &.checked > .inner::before {
                    background-image: svg-load("./check.svg", stroke=$menu-text-active);
                }

                & > .inner > .badge {
                    background-color: var(--menu-badge-background-active);
                    color: var(--menu-text-active);
                }
            }
        }

        &.disabled {
            opacity: 0.4;
        }

        &.picked {
            z-index: 3;

            & > .inner {
                animation: 60ms step-end menu-picked;
                background-color: var(--menu-active);
                color: var(--menu-text-active);
            }
        }

        &.separator {
            background-color: var(--menu-separator);
            height: 1px;
            margin: 6px 0;
            padding: 0;
        }

        &.submenu > .inner::after {
            content: " ";
            background-image: svg-load("./caret.svg", stroke=$menu-caret);
            background-repeat: no-repeat;
            background-position: center center;
            padding-left: 8px;
        }

        &.submenu > .safearea {
            display: none;
            width: 100%;
            position: absolute;
            top: -6px; // matches `& ul` rule below
            left: 0;
        }

        &.checked > .inner::before {
            content: " ";
            background-image: svg-load("./check.svg", stroke=$menu-text);
            background-repeat: no-repeat;
            background-position: center center;
            position: absolute;
            left: 15px;
            top: 0.5px;
            height: 26px;
            width: 10px;
        }

        &.checked.has-badge > .inner::before {
            height: 30px;
        }

        & span,
        & .row {
            pointer-events: none;
        }

        & .row {
            align-items: center;
            display: flex;
            flex-direction: row;
            width: 100%;
            max-width: 250px;
        }

        &:not(.picked):not(.hover):not(:hover) .accelerator,
        &.disabled .accelerator,
        &:not(.picked) .description {
            color: var(--text-subtle);
        }

        & .accelerator {
            padding-left: 15px;

            & span {
                text-align: center;
            }

            & span:not(.delimiter) {
                min-width: 12px;
            }
        }

        & .badge {
            background-color: var(--menu-badge-background);
            border-radius: 5px;
            color: var(--menu-badge-color);
            font-size: 10px;
            font-weight: 700;
            line-height: 1.1;
            margin-left: 6px;
            padding: 3px 5px;
            text-transform: uppercase;
            text-align: center;
        }

        & .icon {
            align-items: center;
            display: flex;
            font-size: 0px;
            justify-content: center;
            margin-right: 6px;

            > img {
                max-height: 100%;
                max-width: 100%;
            }
        }

        & .label {
            padding-right: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        & .description {
            display: block;
            margin-top: 2px;
            font-size: 10px;
        }
    }

    & ul {
        color: var(--text);
        left: 100%;
        top: -6px;
        opacity: 0;
        pointer-events: none;

        &.anchor-bottom,
        &.anchor-bottom + .safearea {
            bottom: var(--anchor-bottom-offset);
            top: auto;
        }

        &.anchor-top,
        &.anchor-top + .safearea {
            top: var(--anchor-top-offset);
        }

        &.expand-up,
        &.expand-up + .safearea {
            bottom: -6px;
            top: auto;
        }
    }

    & ul.expand-left {
        left: auto;
        right: 100%;
    }

    &.menu-fisso-dark li.submenu > .inner::after {
        background-image: svg-load("./caret.svg", stroke=$menu-caret-dark);
    }

    &.menu-fisso-dark li.checked > .inner::before {
        background-image: svg-load("./check.svg", stroke=$menu-text-link-dark);
    }
}

.menu-fisso-menu-blocker {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;

    &:hover {
        // Hack to track hover events across frames.
        animation: 0s menu-active-item;
    }
}