import { css } from 'lit';
export default css `
  :host {
    display: none;
    position-area: bottom span-right;
    position-try: normal flip-block;
    position: absolute;
    margin: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    /* in most cases the max-height won't matter as this assumes the whole screen to be available, which is rarely the truth. */
    max-height: 90vh;
    overflow: auto;
  }

  :host(:popover-open) {
    display: block;
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-extra-small);
    box-shadow: var(--md-sys-elevation-3);
  }

  .menu-container {
    min-width: 200px;
    padding: 8px 0;
    outline: none;
  }

  .menu-divider {
    height: 1px;
    background-color: var(--md-sys-color-outline-variant);
    margin: 8px 0;
  }

  /* Menu Item Styles */
  .menu-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease;
  }

  .menu-item:hover {
    background-color: var(--md-sys-color-surface-variant);
  }

  .menu-item:focus {
    background-color: var(--md-sys-color-surface-variant);
  }

  .menu-item[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
  }

  .menu-item-content {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
  }

  .menu-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--md-sys-color-on-surface);
    font-size: 20px;
  }

  .menu-item-label {
    flex: 1;
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-label-large-font-family-name);
    font-size: var(--md-sys-typescale-label-large-font-size);
    font-weight: var(--md-sys-typescale-label-large-font-weight);
    line-height: var(--md-sys-typescale-label-large-line-height);
    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  }

  .menu-item-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--md-sys-color-on-surface);
    font-size: 18px;
    font-weight: 500;
  }

  .menu-item-with-submenu {
    position: relative;
  }

  .menu-item-with-submenu:hover .menu-item-arrow {
    color: var(--md-sys-color-primary);
  }

  /* Sub-menu Styles */
  .submenu-container {
    min-width: 200px;
    max-width: 320px;
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-extra-small);
    box-shadow: var(--md-sys-elevation-level3);
    padding: 8px 0;
  }

  /* Submenu positioning with Anchor API */
  ui-sub-menu {
    display: none;
  }

  ui-sub-menu:popover-open {
    display: block;
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-extra-small);
    box-shadow: var(--md-sys-elevation-level3);
    min-width: 200px;
    max-width: 320px;
    padding: 8px 0;
    z-index: 1000;
  }

  /* Fallback positioning for browsers without anchor positioning */
  @supports not (anchor-name: --test) {
    ui-sub-menu:popover-open {
      position: fixed;
      transform: translateX(200px);
    }
  }

  /* Focus Ring */
  md-focus-ring {
    --md-focus-ring-color: var(--md-sys-color-primary);
    --md-focus-ring-width: 2px;
  }

  /* Ripple Effect */
  ui-ripple {
    --md-ripple-color: var(--md-sys-color-primary);
    --md-ripple-opacity: 0.12;
  }

  /* Responsive Design */
  @media (max-width: 600px) {
    .menu-container {
      min-width: 180px;
      max-width: 280px;
    }

    .submenu-container {
      min-width: 180px;
      max-width: 280px;
    }
  }

  /* High Contrast Mode */
  @media (prefers-contrast: high) {
    .menu-container {
      border: 1px solid var(--md-sys-color-outline);
    }

    .submenu-container {
      border: 1px solid var(--md-sys-color-outline);
    }

    .menu-divider {
      background-color: var(--md-sys-color-outline);
    }
  }

  /* Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .menu-item {
      transition: none;
    }
  }
`;
//# sourceMappingURL=Menu.styles.js.map