@use "../expressive-menu" as menu;

// Shared editor fixes for both vendor-color and Material-color worksheets.
// Cell text follows the worksheet palette, not Materialize's page-level input color.
.jss_worksheet td.editor {
  z-index: 30 !important;
  &:not(.jss_freezed) { position: relative; }
  > input,
  > textarea,
  .jdropdown-header {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
    opacity: 1;
    background-color: inherit;
  }
}

/// Theme jSuites menus at the root so body-portalled editors receive the same look.
/// Positioning, scrolling, and selection remain owned by jSuites.
.jdropdown-container {
    @include menu.surface;

    overflow: hidden;

    .jdropdown-content {
        padding: 2px 4px;
        border: none;
        border-radius: inherit;
        background-color: var(--menu-surface);
        scroll-padding-block: 2px;
    }

    .jdropdown-item {
        @include menu.item;

        position: relative;
        padding: 12px 40px 12px 12px;
        font-family: inherit;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.5px;
        background-image: none;
        cursor: pointer;

        + .jdropdown-item { margin-top: 2px; }

        &:first-child {
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        &:last-child {
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }

        &.jdropdown-selected {
            @include menu.selected;

            &::after {
                content: 'check';
                position: absolute;
                inset-inline-end: 12px;
                font-family: 'Material Icons';
                font-size: 20px;
                color: currentColor;
            }
        }

        &:not([data-disabled="true"], [aria-disabled="true"]) {
            &:hover { @include menu.state-layer(8%); }

            &.jdropdown-cursor, &:focus-visible {
                @include menu.state-layer;
                @include menu.focus-ring;
            }
        }

        &[data-disabled="true"], &[aria-disabled="true"] {
            color: color-mix(in srgb, var(--menu-item-color) 38%, transparent);
            cursor: default;
        }
    }

    .jdropdown-description { line-height: 24px; }

    .jdropdown-icon {
        font-size: 20px;
        margin-inline: 0 8px;
    }
}

/// Keep nested context menus unclipped while sharing the same menu surface.
.jcontextmenu {
    @include menu.surface;

    padding: 2px 4px;
    min-width: 240px;
    font-family: inherit;

    > div:not(.header) {
        @include menu.item;

        width: auto;
        margin: 0;
        padding: 12px 12px 12px 40px;
        gap: 8px;
        font-family: inherit;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.5px;
        cursor: pointer;

        + div { margin-top: 2px; }

        > a { color: inherit !important; }

        > span {
            color: var(--md-sys-color-on-surface-variant);
            font-size: 12px;
            margin: 0;
            white-space: nowrap;
        }

        &::before {
            color: var(--md-sys-color-on-surface-variant);
            font-size: 20px;
            left: 12px;
        }

        &:not(.jcontextmenu-disabled) {
            &:hover { @include menu.state-layer(8%); }

            &:focus-visible, &:has(> a:focus-visible) {
                @include menu.state-layer;
                @include menu.focus-ring;
            }
        }

        &:first-child, &:is(.header + div, hr + div) {
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        &:last-child, &:has(+ hr) {
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }

        &.jcontextmenu-disabled {
            cursor: default;

            > a, > span, &::before {
                color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent) !important;
            }

            &:hover { background-color: var(--menu-item-surface); }
        }
    }

    > hr {
        border: none;
        border-top: 1px solid var(--md-sys-color-outline-variant);
        margin: 4px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jdropdown-container .jdropdown-item, .jcontextmenu > div:not(.header) {
        transition: none;
    }
}

@media (forced-colors: active) {
    .jdropdown-container, .jcontextmenu { border: 1px solid CanvasText; }

    .jdropdown-container .jdropdown-cursor,
    .jcontextmenu > div:focus-visible,
    .jcontextmenu > div:has(> a:focus-visible) {
        outline: 3px solid Highlight;
        outline-offset: -3px;
    }
}