/**
 * Copyright Aquera Inc 2025
 *
 * 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';

/** Enterprise (`--nile-*`) primary, NxtGen (`--ng-*`) fallback. */
export const styles = css`
  :host {
    display: flex;
    height: 100%;

    --separator-width: 1px;
    --separator-hit-area: 12px;
    --separator-color: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
  }
  .sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
    transition: var(--sidebar-transition, width 0.3s ease);
    position: relative;
  }
  .toggle-btn {
    position: absolute;
    top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
    right: -14px;
    z-index: 10;
  }

  nile-button.toggle-btn::part(base) {
    width: 30px;
    height: 30px;
  }
  nile-button.toggle-btn::part(base) {
    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
  }
  :host(:not([collapsed]):not([resizable])) .sidebar {
    width: 216px;
  }
  :host([collapsed]) .sidebar {
    width: 0px;
  }
  :host([collapsed]) .sidebar-nav {
    display: none;
  }
  .sidebar-header {
    display: flex;
    justify-content: flex-end;
  }
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
    padding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));
    padding-top: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
    padding-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
  }
  .sidebar-nav--rich {
    padding-right: 0px;
  }

  /* Resizable separator */
  .separator {
    flex: 0 0 var(--separator-width);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--separator-color);
    cursor: col-resize;
    position: relative;
    z-index: 1;
    user-select: none;
    touch-action: none;
  }

  .separator:focus {
    outline: none;
  }

  .separator:focus-visible {
    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-50));
  }

  .separator::after {
    content: '';
    position: absolute;
    height: 100%;
    left: calc(var(--separator-hit-area) / -2 + var(--separator-width) / 2);
    width: var(--separator-hit-area);
  }

  :host([resizable]:not([collapsed])) .sidebar {
    border-right: none;
  }

  :host([resizable][placement='right']:not([collapsed])) .sidebar {
    border-left: none;
  }

  :host([collapsed]) .separator {
    display: none;
  }

  :host([placement='right']) .separator {
    order: -1;
  }

  nile-side-bar-action-menu {
    width: fit-content;
    max-width: 400px;
    min-width: 200px;
  }

  nile-side-bar-action-menu::part(menu__items-wrapper) {
    width: 100%;
    max-width: 400px;
    padding-top: var(--nile-spacing-lg, var(--ng-spacing-lg));
    padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));
  }

  nile-side-bar-action-menu-item::part(base) {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
  }

  nile-side-bar-action-menu-item[active]::part(base):hover {
    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
  }

  nile-side-bar-action-menu-item::part(label) {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Transition for sidebar button when it is closed and opened */
  nile-side-bar-action::part(panel),
  nile-side-bar-action-menu {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in;
    transition-delay: 50ms;
  }

  nile-side-bar-action:hover::part(panel),
  nile-side-bar-action:hover nile-side-bar-action-menu {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0ms;
  }

  :host([placement='right']) .sidebar {
    border-right: none;
    border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
    order: 0;
  }

  :host([placement='right']) .toggle-btn {
    right: auto;
    left: -14px;
  }

  :host([placement='right']) .sidebar-header {
    justify-content: flex-start;
  }

  :host([placement='right']) .sidebar-nav {
    padding-right: 0;
    padding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));
  }
`;