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

/**
 * Modal CSS
 */
export const styles = css`
  :host {
    --width: 31rem;
    --header-spacing: var(--nile-spacing-small, var(--ng-spacing-3xl));
    --body-spacing: var(--nile-spacing-small, var(--ng-spacing-3xl));
    --footer-spacing: var(--nile-spacing-small, var(--ng-spacing-3xl));
    --nile-dialog-remove-icon-color: var(--nile-colors-dark-900);
    --nile-border: 1px solid var(--nile-colors-neutral-400);
    display: contents;
    -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;
  }

  [hidden] {
    display: none !important;
  }

  .dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 800;
  }

  .dialog__panel {
    display: flex;
    flex-direction: column;
    z-index: 2;
    width: var(--width);
    max-width: calc(100% - 2.25rem);
    max-height: calc(100% - 2.25rem);
    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-2xl));
    box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-xl));
  }

  .dialog__panel:focus {
    outline: none;
  }

  @media screen and (max-width: 420px) {
    .dialog__panel {
      max-height: 80vh;
    }
  }

  .dialog--open .dialog__panel {
    display: flex;
    opacity: 1;
  }

  .dialog__header {
    flex: 0 0 auto;
    display: flex;
    padding: var(--nile-spacing-lg, var(--ng-spacing-3xl)) var(--nile-spacing-2xl, var(--ng-spacing-3xl)) var(--nile-spacing-lg, var(--ng-spacing-none)) var(--nile-spacing-2xl, var(--ng-spacing-3xl)) ;
    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-2xl)) var(--nile-radius-radius-xs, var(--ng-radius-2xl)) 0 0;
    border: var(--nile-border, var(--ng-border-width-0));
  }

  .dialog__header__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--nile-spacing-5px, var(--ng-spacing-sm));
    justify-content: center;
    margin: var(--nile-spacing-none, var(--ng-spacing-none));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
  }

  slot[name="label"] {
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-spacing-xl, var(--ng-font-size-text-md));
    font-style: normal;
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));
    letter-spacing: 0.2px;
    display:block;
  }

  slot[name="sublabel"] {
    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    font-style: normal;
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
    letter-spacing: 0.2px;
    display:block;
  }

  .dialog__header-actions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: var(--nile-spacing-3-x, var(--ng-spacing-none));
  }

  .dialog__header-actions nile-icon-button,
  .dialog__header-actions ::slotted(nile-icon-button) {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-size: var(--nile-type-scale-4);
  }

  .dialog__body {
    flex: 1 1 auto;
    display: block;
    padding: var(--nile-spacing-small, var(--ng-spacing-3xl));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: var(--nile-border, var(--ng-border-width-0));
  }

  .dialog__body-noheader {
    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-2xl)) var(--nile-radius-radius-xs, var(--ng-radius-2xl)) var(--nile-radius-none, var(--ng-radius-2xl)) var(--nile-radius-none, var(--ng-radius-2xl));
  }

  .dialog__footer {
    flex: 0 0 auto;
    text-align: right;
    padding: var(--nile-spacing-lg, var(--ng-spacing-none)) var(--nile-spacing-3-x, var(--ng-spacing-3xl))  var(--nile-spacing-lg, var(--ng-spacing-3xl)) var(--nile-spacing-3-x, var(--ng-spacing-3xl));
    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
    border-radius: 0 0 var(--nile-radius-radius-xs, var(--ng-radius-2xl)) var(--nile-radius-radius-xs, var(--ng-radius-2xl));
    border: var(--nile-border, var(--ng-border-width-0));
  }

  .dialog__footer ::slotted(nile-button:not(:first-of-type)) {
    margin-inline-start: 0.5rem;
  }

  .dialog:not(.dialog--has-footer) .dialog__footer {
    display: none;
  }

  .dialog__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--nile-bg-color-dialog, var(--ng-componentcolors-alpha-black-70));
  }
  .dialog__close {
    cursor: pointer;
  }

  @media (forced-colors: active) {
    .dialog__panel {
      border: solid 1px hsl(240, 5.9%, 11%);
    }
  }
`;

export default [styles];