/**
 * 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));
    --arrow-size: 18px;
    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
    --arrow-color: var(--nile-colors-white-base, var(--ng-colors-text-white));
  }

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

  nile-popup {
    --arrow-size: 18px;
    --arrow-color: var(--nile-colors-white-base, var(--ng-colors-text-white));
  }

  .popup__arrow {
    position: absolute;
    width: calc(var(--arrow-size-diagonal) * 2);
    height: calc(var(--arrow-size-diagonal) * 2);
    rotate: 45deg;
    background: var(--arrow-color);
    z-index: -1;
    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));
  }
`;

export default [styles];