/**
 * 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';
import { utilityControlStyles } from '../internal/app-shell-utility-control-styles';

export const styles = css`
  :host {
    box-sizing: border-box;
    /* A flex item of the shell's panel region, filling it. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  :host([hidden]) {
    display: none;
  }

  /* The panel header keeps its own height, never the page header's; the literal is the floor for a panel mounted outside a shell. */
  .header {
    box-sizing: border-box;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--nile-spacing-md, var(--ng-spacing-md));
    height: var(--nile-app-shell-panel-header-height, 56px);
    padding-inline: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid
      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
  }

  :host([no-header]) .header {
    display: none;
  }

  /* The back control for a sub-view; stands where the brand mark does in the root view. */
  .back {
    flex: 0 0 auto;
    margin-inline-start: -6px;
  }

  /* Mirrors the back control's offset on the end edge: the 20px glyph, not the 32px circle, lands on the padding line. */
  .close {
    margin-inline-end: -6px;
  }

  :host([back]) .mark {
    display: none;
  }

  .heading {
    display: flex;
    align-items: center;
    gap: var(--nile-spacing-md, var(--ng-spacing-md));
    min-width: 0;
  }

  .mark {
    display: inline-flex;
    color: var(
      --nile-colors-primary-600,
      var(--ng-colors-fg-brand-primary-600)
    );
  }

  .mark nile-glyph {
    --nile-svg-fill: currentColor;
    --nile-svg-stroke-width: var(--ng-svg-stroke-width);
    width: 20px;
    height: 20px;
  }

  .title {
    margin: 0;
    /* Figma's Assistant Title: Text lg/Semibold, 18/28 on NxtGen. Enterprise keeps --nile-type-scale-3, and it defines no --ng-* tokens, so the line-height declaration is invalid there and the title inherits its line height exactly as before. */
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));
    line-height: var(--ng-line-height-text-lg);
    font-weight: var(
      --nile-font-weight-semi-bold,
      var(--ng-font-weight-semibold)
    );
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .actions {
    display: flex;
    align-items: center;
    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
    margin-inline-start: auto;
  }

  :host([no-close]) .close {
    display: none;
  }

  /* ------------------------------------------------------- utility controls */

  /* The header's own icon controls (back and close): the shared utility-control recipe. */
  ${utilityControlStyles}

  .body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
    /* 16 under the header, 24 on the sides and bottom. */
    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
  }

  :host([no-padding]) .body {
    padding: 0;
  }

  .footer {
    flex: 0 0 auto;
    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
    border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid
      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
  }

  :host(:not([has-footer])) .footer {
    display: none;
  }
`;

export default [styles];