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

/** AppShell CSS: a grid of banner, top bar, side-nav track and content column, whose flex row holds the container, aside and docked AI panel. */
export const styles = css`
  :host {
    /* Geometry: design tokens where one exists, bare pixels where none does. */
    /* The nav track mirrors nile-side-bar's own width expressions (enterprise 240/70, NxtGen 296/68); keep in step with nile-side-bar.css.ts. */
    --nile-app-shell-side-nav-width: var(
      --nile-width-240px,
      var(--ng-spacing-296, 240px)
    );
    --nile-app-shell-side-nav-rail-width: var(
      --nile-width-70px,
      var(--ng-spacing-68, 70px)
    );
    --nile-app-shell-gutter: var(--nile-spacing-xs, var(--ng-spacing-xs));
    --nile-app-shell-content-padding: var(
      --nile-spacing-3xl,
      var(--ng-spacing-3xl)
    );
    --nile-app-shell-top-bar-height: 68px;
    /* The panel header keeps its own height, distinct from the page header. */
    --nile-app-shell-panel-header-height: 56px;
    --nile-app-shell-tabs-height: 33px;
    /* The leading app icon is its own 20px size, not the 32px utility box. */
    --nile-app-shell-app-icon-size: 20px;
    --nile-app-shell-panel-width: 480px;
    --nile-app-shell-panel-min-width: 360px;
    --nile-app-shell-aside-width: 320px;
    --nile-app-shell-aside-min-width: 240px;
    --nile-app-shell-content-min-width: 640px;
    --nile-app-shell-min-width: 768px;
    --nile-app-shell-centered-width: 824px;
    /* Both tokens are 32px; the literal is the floor with no theme sheet loaded. */
    --nile-app-shell-utility-size: var(
      --nile-spacing-4xl,
      var(--ng-spacing-4xl, 32px)
    );
    --nile-app-shell-radius: var(--nile-radius-xl, var(--ng-radius-2xl));
    --nile-app-shell-duration: var(
      --nile-transition-duration-default,
      var(--ng-transition-duration-default)
    );
    /* NxtGen ships no easing tokens, so the shell names its own. */
    --nile-app-shell-ease: cubic-bezier(0.2, 0, 0, 1);

    --_side-nav-track: var(--nile-app-shell-side-nav-width);

    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-areas:
      'banner banner'
      'top-bar top-bar'
      'side-nav content';
    grid-template-columns: var(--_side-nav-track) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    /* Below this the window scrolls rather than the shell compressing. */
    min-width: var(--nile-app-shell-min-width);
    height: 100%;
    overflow: hidden;
    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
    transition: grid-template-columns var(--nile-app-shell-duration)
      var(--nile-app-shell-ease);
  }

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

  :host([full-height]) {
    height: 100dvh;
  }

  /* Effective rail state: the user's preference, or a forced rail when narrow. */
  :host([rail]) {
    --_side-nav-track: var(--nile-app-shell-side-nav-rail-width);
  }

  :host(:not([has-side-nav])) {
    --_side-nav-track: 0px;
  }

  /* The Description axis: a present description adds the 8px its second line occupies. */
  :host([has-description]) {
    --nile-app-shell-top-bar-height: 76px;
  }

  /* The top bar compresses before the content does. */
  @media (max-height: 600px) {
    :host {
      --nile-app-shell-top-bar-height: 56px;
    }

    :host([has-description]) {
      --nile-app-shell-top-bar-height: 64px;
    }
  }

  /* ---------------------------------------------------------------- banner */

  .banner {
    grid-area: banner;
    min-width: 0;
  }

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

  /* ------------------------------------------------------------- side nav */

  .side-nav {
    grid-area: side-nav;
    display: flex;
    min-width: 0;
    overflow: hidden;
  }

  :host(:not([has-side-nav])) .side-nav {
    display: none;
  }

  /* A slotted sidebar fills the shell-owned track and drops its own surface and edge; set --nile-app-shell-side-nav-bg to restore one. */
  /* width is deliberately not !important: the 100% lets a raw <nav> or nile-app-shell-side-nav fill the track, while a slotted
     nile-side-bar sizes itself from the same tokens the track reads (see the :host geometry block). Tests 21/22 in
     nile-app-shell-regions.test.ts lock the two together; change both or neither. */
  ::slotted([slot='side-nav']) {
    width: 100%;
    height: 100%;
    background: var(--nile-app-shell-side-nav-bg, transparent) !important;
    border-right: var(--nile-app-shell-side-nav-border, 0) !important;
  }

  /* -------------------------------------------------------- content column */

  .content-section {
    grid-area: content;
    position: relative;
    display: flex;
    min-width: 0;
    gap: var(--nile-app-shell-gutter);
    padding: var(--nile-app-shell-gutter);
    /* Flush against the nav track; the gutter insets the other three sides. */
    padding-inline-start: 0;
    box-sizing: border-box;
  }

  /* With no nav track there is nothing to sit flush against, so the start edge takes the gutter too. */
  :host(:not([has-side-nav])) .content-section {
    padding-inline-start: var(--nile-app-shell-gutter);
  }

  .container {
    box-sizing: border-box;
    /* The floor is the flex basis, not a min-width, so the container yields instead of overflowing the clipped row. */
    flex: 1 1 var(--nile-app-shell-content-min-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));
    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
    border-radius: var(--nile-app-shell-radius);
    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));
    /* The container, not the viewport, is the sizing context for page content. */
    container-type: inline-size;
    container-name: nile-content;
  }

  /* content-container moves the size query context onto the slotted page root so page CSS can query nile-content; opt-in as it brings containment. */
  :host([content-container]) slot:not([name])::slotted(*) {
    container-type: inline-size;
    container-name: nile-content;
  }

  :host([flat]) .container {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
  }

  /* ---------------------------------------------------------------- top bar */

  .top-bar {
    box-sizing: border-box;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
    height: var(--nile-app-shell-top-bar-height);
    padding-inline: var(--nile-app-shell-content-padding);
  }

  /* The header bar draws no bottom rule in any variant; the only divider comes from the tab rail (see .tabs). */

  .shell-top-bar {
    grid-area: top-bar;
    min-width: 0;
    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));
    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));
    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid
      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
  }

  /* No slotted bar content and no nav toggle means no bar at all. */
  :host(:not([has-top-bar])) .top-bar {
    display: none;
  }

  .top-bar-content {
    display: flex;
    align-items: center;
    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
    min-width: 0;
    flex: 1 1 auto;
  }

  /* The title block: the back arrow, then the stack (app icon, heading and badge, with the description under them); renders before the top-bar slot. */
  .title-area {
    display: flex;
    /* Top-aligned, not centred: the back arrow belongs to the title's row, not the title-plus-description stack. */
    align-items: flex-start;
    /* Figma's Title Area gap: 16px from the arrow to the stack. */
    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
    min-width: 0;
  }

  /* The back arrow's line box: exactly the page title's line height, centring the arrow on the title row. */
  .back-line {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
  }

  .title-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
    min-width: 0;
  }

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

  .page-title {
    margin: 0;
    min-width: 0;
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
    line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));
    font-weight: var(--nile-font-weight-medium, 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;
  }

  .description {
    margin: 0;
    min-width: 0;
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The badge sits on the title row and never shrinks the title away; each surface token pairs a Nile name with its NxtGen equivalent. */
  .badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding-inline: var(--nile-spacing-md, var(--ng-spacing-md));
    padding-block: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
      var(
        --nile-colors-neutral-400,
        var(--ng-componentcolors-utility-gray-200)
      );
    border-radius: var(--nile-radius-full, var(--ng-radius-full));
    background: var(
      --nile-colors-neutral-100,
      var(--ng-componentcolors-utility-gray-50)
    );
    color: var(
      --nile-colors-dark-500,
      var(--ng-componentcolors-utility-gray-700)
    );
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
    white-space: nowrap;
  }

  /* headerBack: an icon-only native button, so the aria-label names it directly; the shell owns no history, so pressing it only emits nile-click { value: 'back' }. */
  .back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));
  }

  .back:hover {
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
  }

  /* App icon: a 20px block at the start of the title row, so the description lines up under it; shown whenever the app-icon slot has content. */
  .app-icon {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nile-app-shell-app-icon-size);
    height: var(--nile-app-shell-app-icon-size);
    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
    overflow: hidden;
  }

  /* The slotted mark fills the wrapper edge to edge, clipped to the box. */
  .app-icon slot::slotted(*) {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  /* The wrapper takes no fill; the rim is a white-12% gradient drawn as a masked ::before, with literal mask fallbacks for the nxtgen-only tokens. */
  .app-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      180deg,
      rgb(255 255 255 / 12%) 0%,
      rgb(255 255 255 / 0%) 100%
    );
    mask: var(
      --ng-mask-rim,
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0)
    );
    mask-composite: var(--ng-mask-composite-exclude, exclude);
    padding: 1.4px;
  }

  :host(:not([has-app-icon])) .app-icon {
    display: none;
  }

  /* Figma's Header Bar gap: 16px between every header action, the divider and Ask. */
  .top-bar-actions {
    display: flex;
    align-items: center;
    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
    margin-inline-start: auto;
  }

  /* Hidden when empty, so an empty group's gap does not pull the bar's content short of the padding edge. */
  :host(:not([has-top-bar-actions]):not([has-ask])) .top-bar-actions {
    display: none;
  }

  /* The Ask button: a stock <nile-button variant="secondary"> the shell renders itself; the only rule here is its flex behaviour as a top-bar item. */
  .ask {
    flex: 0 0 auto;
  }

  .ask-mark {
    display: inline-flex;
    align-items: center;
  }

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

  /* 10px after the 32px circle is 16px after the 20px glyph (6px overhang + 10), Figma's toggle-to-divider gap. */
  .nav-toggle-group {
    display: flex;
    align-items: center;
    gap: var(--nile-spacing-md-alt, var(--ng-spacing-md-alt));
  }

  /* Lands the 20px glyph box, not the 32px utility circle, on the 24px origin: (32 - 20) / 2 = 6. */
  .nav-toggle {
    margin-inline-start: -6px;
  }

  /* Figma's Divider Line: a 16px 1px stroke that takes no layout width, so the items on both sides sit a clean 16px from it. Used after the nav toggle and, as ask-rule, before Ask. */
  .rule {
    flex: 0 0 auto;
    width: var(--nile-border-width-1, var(--ng-border-width-1));
    margin-inline-end: calc(-1 * var(--nile-border-width-1, var(--ng-border-width-1)));
    height: 16px;
    background: var(
      --nile-colors-neutral-400,
      var(--ng-colors-border-secondary)
    );
  }

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

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

  /* --------------------------------------------------------------- tab strip */

  /* Hoisted out of the scroller so it never scrolls away; sits flush under the top bar and carries the header block's single bottom rule. */
  .tabs {
    box-sizing: border-box;
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
    min-width: 0;
    /* A floor, not a fixed box: the strip is as tall as the row it holds plus its rule. */
    min-height: var(--nile-app-shell-tabs-height);
    padding-inline: var(--nile-app-shell-content-padding);
    /* The strip carries the rule for the whole header block. */
    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid
      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
    overflow-x: auto;
    scrollbar-width: none;
  }

  /* The header tab's 0/4/12/4 padding composes the 32px row; the 12px bottom gives the active indicator its band, set via the group's public padding hook. */
  ::slotted([slot='tabs']) {
    --nile-nav-tab-padding: var(--nile-spacing-none, var(--ng-spacing-none))
      var(--nile-spacing-xs, var(--ng-spacing-xs))
      var(--nile-spacing-lg, var(--ng-spacing-lg))
      var(--nile-spacing-xs, var(--ng-spacing-xs));
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  :host(:not([has-tabs])) .tabs,
  :host([notabs]) .tabs {
    display: none;
  }

  /* A slotted nile-nav-tab-group drops its own track (--track-width:0 on the host) and is bottom-aligned so its indicator sits on the region's single rule. */
  /* Scoped to the group, not the slot, so bare tab controls are not stretched to an equal share of the strip. */
  ::slotted(nile-nav-tab-group[slot='tabs']) {
    --track-width: 0px;
    /*
     * The active indicator (Figma: fg-brand-primary-alt) is NOT set here: the top placement hard-codes
     * var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700)) inside nile-nav-tab-group's shadow tree, and
     * remapping either token from here would also recolour nile-nav-tab's focus ring and focus label. Known limitation (spec A-7).
     */
    /*
     * The inactive label: nile-nav-tab paints it var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700)), so the strip
     * points the NxtGen fallback at text-quaternary-500. Enterprise defines --nile-colors-dark-500 and is untouched. Inside an
     * underline group nothing else reads text-secondary-700 (only the group's other variants and side placements do).
     */
    --ng-colors-text-secondary-700: var(--ng-colors-text-quaternary-500);
    flex: 1 1 auto;
    min-width: 0;
    align-self: flex-end;
  }

  /* ------------------------------------------------------------------- main */

  .main {
    box-sizing: border-box;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    /* Top and sides only: the page runs to the container's bottom edge. */
    padding: var(--nile-app-shell-content-padding);
    padding-block-end: 0;
  }

  .main:focus {
    outline: none;
  }

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

  .main-inner {
    width: 100%;
    min-height: 0;
  }

  /* Centred when short, scrolls from the top when tall. */
  :host([content-align='centered']) .main-inner {
    /* width:100% + max-width leaves space for the auto margins to centre it while short, and scroll from the top when tall. */
    width: 100%;
    max-width: var(--nile-app-shell-centered-width);
    margin: auto;
  }

  /* ------------------------------------------------------------------ aside */

  .aside {
    box-sizing: border-box;
    /* Gives before the page does, down to its own floor. */
    flex: 0 1 var(--nile-app-shell-aside-width);
    min-width: var(--nile-app-shell-aside-min-width);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    padding: var(--nile-app-shell-content-padding);
    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));
    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
    border-radius: var(--nile-app-shell-radius);
  }

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

  /* -------------------------------------------------------------- AI panel */

  .panel {
    box-sizing: border-box;
    /* The panel pushes the page rather than covering it: full width while the row affords it, shrinking to a real min-width floor. */
    flex: 0 1 var(--nile-app-shell-panel-width);
    width: var(--nile-app-shell-panel-width);
    min-width: var(--nile-app-shell-panel-min-width);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));
    /* The panel is elevated, so its edge sits a rung above the container's. */
    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
    border-radius: var(--nile-app-shell-radius);
    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
  }

  /* Docked: a flex sibling. It squeezes the content, it does not cover it. */
  :host(:not([panel-open])) .panel {
    display: none;
  }

  /* Overlay: contained to the content column, above it, and animated in. */
  :host([panel-mode='overlay']) .panel {
    position: absolute;
    z-index: 1001;
    inset-block: var(--nile-app-shell-gutter);
    inset-inline-end: var(--nile-app-shell-gutter);
    flex: none;
    display: flex;
    width: min(var(--nile-app-shell-panel-width), 92%);
    visibility: hidden;
    transform: translateX(calc(100% + var(--nile-app-shell-gutter)));
    transition: transform var(--nile-app-shell-duration)
        var(--nile-app-shell-ease),
      visibility 0s linear var(--nile-app-shell-duration);
  }

  :host([panel-mode='overlay'][panel-open]) .panel {
    visibility: visible;
    transform: none;
    transition: transform var(--nile-app-shell-duration)
      var(--nile-app-shell-ease);
  }

  /* An unavailable panel is unmounted in either mode. */
  :host(:not([has-panel])) .panel {
    display: none;
  }

  .panel-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);
    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));
  }

  /* The back control for a panel sub-view; stands where the brand mark does in the root view. */
  .panel-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. */
  .panel-close {
    margin-inline-end: -6px;
  }

  :host([panelback]) .panel-mark {
    display: none;
  }

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

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

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

  .panel-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;
  }

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

  .panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    /* 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));
    display: flex;
    flex-direction: column;
    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
  }

  .panel-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-panel-footer])) .panel-footer {
    display: none;
  }

  /* ---------------------------------------------------------- skip link */

  .skip-link {
    position: absolute;
    z-index: 1002;
    inset-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
    inset-block-start: var(--nile-spacing-md, var(--ng-spacing-md));
    display: inline-flex;
    align-items: center;
    padding: var(--nile-spacing-md, var(--ng-spacing-md))
      var(--nile-spacing-lg, var(--ng-spacing-lg));
    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
    border-radius: var(--nile-radius-md, var(--ng-radius-md));
    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
    font: inherit;
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
    cursor: pointer;
    transform: translateY(-200%);
    transition: transform
      var(--nile-transition-duration-short, var(--ng-transition-duration-fast))
      var(--nile-app-shell-ease);
  }

  .skip-link:focus-visible {
    outline: none;
    transform: none;
    box-shadow: 0 0 0 2px
        var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary)),
      0 0 0 4px
        var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
  }

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

  @media (prefers-reduced-motion: reduce) {
    :host,
    .panel,
    .skip-link {
      transition: none;
    }
  }
`;

export default [styles];