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

/** AppShellSideNav CSS: the shell owns the track width, this owns what happens inside it — a pinned header, a scrolling body, a pinned footer. */
export const styles = css`
  :host {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* The nav and the page share one surface. */
    background: var(--nile-app-shell-side-nav-bg, transparent);
  }

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

  .header,
  .footer {
    flex: 0 0 auto;
    display: block;
  }

  .body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(
      --nile-app-shell-side-nav-padding,
      var(--nile-spacing-lg, var(--ng-spacing-lg))
    );
    scrollbar-width: thin;
  }

  .body::-webkit-scrollbar {
    width: 6px;
  }

  .body::-webkit-scrollbar-track {
    background: transparent;
  }

  .body::-webkit-scrollbar-thumb {
    background-color: var(
      --nile-colors-neutral-500,
      var(--ng-colors-border-primary)
    );
    border-radius: 10px;
  }

  /* A rail has no room for a horizontal scrollbar or for wide children. */
  :host([collapsed]) .body {
    overflow-x: hidden;
  }
`;

export default [styles];