/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { css } from 'lit';

/**
 * CommandMenuItem CSS
 */
export const styles = css`
  :host {
    box-sizing: border-box;
    display: block;
    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
  }

  :host *,
  :host *::before,
  :host *::after {
    box-sizing: inherit;
  }

  :host([hidden]) {
    display: none !important;
  }

  .item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--nile-spacing-md, var(--ng-spacing-md));
    width: 100%;
    margin-block: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
    border-radius: var(--nile-radius-md, var(--ng-radius-md));
    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));
    cursor: pointer;
    user-select: none;
    transition: background-color 200ms ease, color 200ms ease;
  }

  /* size variants — small (default) vs medium */
  :host([size='medium']) .item {
    padding-block: var(--nile-spacing-lg, var(--ng-spacing-lg));
  }

  /* Active / selected (keyboard or hover) */
  :host([active]:not([disabled])) .item,
  .item:hover {
    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
  }

  :host([disabled]) .item {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
  }

  .item__icon {
    flex: 0 0 auto;
    /* Reserve a fixed icon gutter so items with and without a leading icon
       keep their labels aligned. */
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));
  }

  .item__icon::slotted(*) {
    width: 20px;
    height: 20px;
  }

  .item__label {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .item__suffix {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
  }

  .item__shortcut {
    display: inline-flex;
    align-items: center;
    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
  }

  .item__shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    font-family: inherit;
    font-size: 11px;
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
    line-height: 1;
    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));
  }
`;

export default [styles];