// Copyright (c) Jupyter Development Team.
// Copyright (c) Microsoft Corporation.
// Distributed under the terms of the Modified BSD License.

import { css, ElementStyles } from '@microsoft/fast-element';
import {
  forcedColorsStylesheetBehavior,
  FoundationElementTemplate
} from '@microsoft/fast-foundation';
import { SystemColors } from '@microsoft/fast-web-utilities';
import {
  controlCornerRadius,
  designUnit,
  fillColor,
  strokeWidth
} from '../../design-tokens.js';
import { elevation } from '../../styles/index.js';

/**
 * Styles for Picker menu
 * @public
 */
export const pickerMenuStyles: FoundationElementTemplate<ElementStyles> = (
  context,
  definition
) =>
  css`
    :host {
      background: ${fillColor};
      --elevation: 11;
      /* TODO: a mechanism to manage z-index across components
            https://github.com/microsoft/fast/issues/3813 */
      z-index: 1000;
      display: flex;
      width: 100%;
      max-height: 100%;
      min-height: 58px;
      box-sizing: border-box;
      flex-direction: column;
      overflow-y: auto;
      overflow-x: hidden;
      pointer-events: auto;
      border-radius: calc(${controlCornerRadius} * 1px);
      padding: calc(${designUnit} * 1px) 0;
      border: calc(${strokeWidth} * 1px) solid transparent;
      ${elevation}
    }

    .suggestions-available-alert {
      height: 0;
      opacity: 0;
      overflow: hidden;
    }
  `.withBehaviors(
    forcedColorsStylesheetBehavior(css`
      :host {
        background: ${SystemColors.Canvas};
        border-color: ${SystemColors.CanvasText};
      }
    `)
  );
