import { css } from 'lit'

export default css`
    :host {
        --submenu-offset: -2px;

        display: block;
    }

    :host([inert]) {
        display: none;
    }

    .menu-item {
        position: relative;
        display: flex;
        align-items: stretch;
        font-family: var(--terra-menu-item-font-family);
        font-size: var(--terra-font-size-medium);
        font-weight: var(--terra-font-weight-normal);
        line-height: var(--terra-line-height-normal);
        letter-spacing: var(--terra-letter-spacing-normal);
        color: var(--terra-menu-item-color);
        padding: var(--terra-spacing-2x-small) var(--terra-spacing-2x-small);
        transition: var(--terra-transition-fast) fill;
        user-select: none;
        -webkit-user-select: none;
        white-space: nowrap;
        cursor: pointer;
    }

    .menu-item.menu-item--disabled {
        outline: none;
        opacity: 0.5;
        cursor: not-allowed;
    }

    .menu-item.menu-item--loading {
        outline: none;
        cursor: wait;
    }

    .menu-item.menu-item--loading *:not(terra-loader) {
        opacity: 0.5;
    }

    .menu-item--loading terra-loader {
        --indicator-color: currentColor;
        --track-width: 1px;
        position: absolute;
        font-size: 0.75em;
        top: calc(50% - 0.5em);
        left: 0.65rem;
        opacity: 1;
    }

    .menu-item .menu-item__label {
        flex: 1 1 auto;
        display: inline-block;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .menu-item .menu-item__prefix {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }

    .menu-item .menu-item__prefix::slotted(*) {
        margin-inline-end: var(--terra-spacing-x-small);
    }

    .menu-item .menu-item__suffix {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }

    .menu-item .menu-item__suffix::slotted(*) {
        margin-inline-start: var(--terra-spacing-x-small);
    }

    /* Safe triangle */
    .menu-item--submenu-expanded::after {
        content: '';
        position: fixed;
        z-index: calc(var(--terra-z-index-dropdown) - 1);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        clip-path: polygon(
            var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
            var(--safe-triangle-submenu-start-x, 0)
                var(--safe-triangle-submenu-start-y, 0),
            var(--safe-triangle-submenu-end-x, 0)
                var(--safe-triangle-submenu-end-y, 0)
        );
    }

    :host(:focus-visible) {
        outline: none;
    }

    :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
    .menu-item--submenu-expanded {
        background-color: var(--terra-menu-item-background-color-hover);
        color: var(--terra-menu-item-color-hover);
    }

    :host(:focus-visible) .menu-item {
        outline: none;
        background-color: var(--terra-menu-item-background-color-focus);
        color: var(--terra-menu-item-color-focus);
        opacity: 1;
    }

    .menu-item .menu-item__check,
    .menu-item .menu-item__chevron {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5em;
        visibility: hidden;
    }

    .menu-item--checked .menu-item__check,
    .menu-item--has-submenu .menu-item__chevron {
        visibility: visible;
    }

    /* Add elevation and z-index to submenus */
    terra-popup::part(popup) {
        box-shadow: var(--terra-shadow-large);
        z-index: var(--terra-z-index-dropdown);
        margin-left: var(--submenu-offset);
    }

    .menu-item--rtl terra-popup::part(popup) {
        margin-left: calc(-1 * var(--submenu-offset));
    }

    @media (forced-colors: active) {
        :host(:hover:not([aria-disabled='true'])) .menu-item,
        :host(:focus-visible) .menu-item {
            outline: dashed 1px SelectedItem;
            outline-offset: -1px;
        }
    }

    ::slotted(terra-menu) {
        max-width: var(--auto-size-available-width) !important;
        max-height: var(--auto-size-available-height) !important;
    }
`
