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

/**
 * Popover CSS
 */
export const styles = css`
  :host {
    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));
  }

  .popover__title {
    display: block;
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
    font-style: normal;
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
    letter-spacing: var(--nile-spacing-one-by-five-x, var(--ng-spacing-none));
  }

  .popover__box {
    display: flex;
    flex-direction: column;
    height: auto;
    min-width: var(--nile-width-352px, var(--ng-width-80));
    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
  }

  .popover__action {
    align-self: end;
    display: inline;
  }

  nile-popup {
    --arrow-size: 10px;
    --arrow-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    --arrow-border-color: var(
      --nile-colors-dark-200,
      var(--ng-colors-border-secondary-alt)
    );
  }

  nile-popup::part(arrow) {
    z-index: 1;
    border: none;
    box-shadow: none;
  }

  nile-popup[data-current-placement^='bottom']::part(arrow) {
    border-top: solid 1px var(--arrow-border-color);
    border-left: solid 1px var(--arrow-border-color);
  }

  nile-popup[data-current-placement^='top']::part(arrow) {
    border-bottom: solid 1px var(--arrow-border-color);
    border-right: solid 1px var(--arrow-border-color);
  }

  nile-popup[data-current-placement^='left']::part(arrow) {
    border-top: solid 1px var(--arrow-border-color);
    border-right: solid 1px var(--arrow-border-color);
  }

  nile-popup[data-current-placement^='right']::part(arrow) {
    border-bottom: solid 1px var(--arrow-border-color);
    border-left: solid 1px var(--arrow-border-color);
  }
`;

export default [styles];