/**
 * 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';

/**
 * CommandMenu CSS
 */
export const styles = css`
  :host {
    --width: 640px;
    --max-height: 480px;

    display: contents;
    box-sizing: border-box;
    -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;
  }

  .command {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 15vh var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
  }

  .command[hidden] {
    display: none;
  }

  .command__overlay {
    position: fixed;
    inset: 0;
    background-color: var(--nile-bg-color-dialog, var(--ng-componentcolors-alpha-black-70));
  }

  .command__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--width);
    max-height: var(--max-height);
    overflow: hidden;
    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
    border-radius: var(--nile-radius-lg, var(--ng-radius-xl));
    box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-xl));
  }

  .command__panel:focus {
    outline: none;
  }

  /* Search header */
  .command__header {
    display: flex;
    align-items: center;
    gap: var(--nile-spacing-md, var(--ng-spacing-md));
    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
  }

  .command__search-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));
  }

  .command__search-icon nile-glyph {
    width: 20px;
    height: 20px;
  }

  .command__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
    line-height: 1.4;
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
  }

  .command__input::placeholder {
    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
  }

  /* "Searching for" scopes row */
  .command__scopes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nile-spacing-md, var(--ng-spacing-md));
    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
    border-bottom: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
  }

  .command__scopes-label {
    flex: 0 0 auto;
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
  }

  .command__scopes-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
  }

  /* Scrollable results list */
  .command__list {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--nile-spacing-sm, var(--ng-spacing-sm));
  }

  .command__empty {
    display: none;
    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
    text-align: center;
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
  }

  .command__empty--visible {
    display: block;
  }

  /* Footer */
  .command__footer {
    display: none;
    align-items: center;
    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
    border-top: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
  }

  .command--has-footer .command__footer {
    display: flex;
  }

  /* Built-in keyboard-hint row (footer slot fallback) */
  .command__hints {
    display: flex;
    align-items: center;
    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
  }

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

  .command__footer 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;
    line-height: 1;
    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));
  }
`;

export default [styles];