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

/**
 * nile-minimap CSS
 */
export const styles = css`
  :host {
    display: inline-block;
    box-sizing: border-box;
    width: var(--nile-minimap-width, 112px);
    height: var(--nile-minimap-height, 40px);
    vertical-align: middle;
  }

  /* Vertical mode swaps the two size tokens. */
  :host([data-vertical]) {
    width: var(--nile-minimap-height, 40px);
    height: var(--nile-minimap-width, 112px);
  }

  /* hideWhenFits: internal state, never touches the consumer's own [hidden]. */
  :host([data-fit]) {
    display: none;
  }

  /* No container resolved from \`for\`: render nothing. */
  :host([data-unresolved]) {
    display: none;
  }

  .base {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: var(--ng-spacing-1-5);
    background: var(--ng-colors-bg-primary);
    border: var(--ng-border-width-1) solid var(--ng-colors-border-secondary);
    border-radius: var(--ng-radius-lg);
    box-shadow: var(--ng-shadow-md);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.15s ease;
  }

  /* autoHide: idle between scrolls. Keeps its space; ignores the pointer. */
  :host([data-idle]) .base {
    opacity: 0;
    pointer-events: none;
  }

  .track {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: var(--ng-radius-xs);
  }

  .segment {
    position: absolute;
    background: var(--ng-colors-bg-quaternary);
    border-radius: var(--ng-radius-xs);
  }

  :host(:not([data-vertical])) .segment {
    left: var(--s);
    width: var(--l);
    top: 0;
    bottom: 0;
  }

  :host([data-vertical]) .segment {
    top: var(--s);
    height: var(--l);
    left: 0;
    right: 0;
  }

  /* Track mode: hide segments, draw the rail. */
  .base--track .segments {
    display: none;
  }

  .base--track .track {
    background: var(--ng-colors-bg-quaternary);
  }

  /* RTL: mirror the horizontal track so segments and the viewport flip. */
  .base--rtl .track {
    transform: scaleX(-1);
  }

  .viewport {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--ng-colors-border-brand);
    border-radius: var(--ng-radius-sm);
    cursor: grab;
    transition: background-color 0.12s;
    background: transparent;
  }

  :host(:not([data-vertical])) .viewport {
    left: calc(var(--vs, 0px) - 3px);
    width: calc(var(--vl, 0px) + 6px);
    top: -3px;
    bottom: -3px;
  }

  :host([data-vertical]) .viewport {
    top: calc(var(--vs, 0px) - 3px);
    height: calc(var(--vl, 0px) + 6px);
    left: -3px;
    right: -3px;
  }

  .viewport:hover {
    background: color-mix(
      in srgb,
      var(--ng-colors-bg-brand-solid) 8%,
      transparent
    );
  }

  .base--drag .viewport {
    background: color-mix(
      in srgb,
      var(--ng-colors-bg-brand-solid) 14%,
      transparent
    );
    cursor: grabbing;
  }

  .viewport:focus {
    outline: none;
  }

  .viewport:focus-visible {
    box-shadow: var(--ng-focus-ring);
  }

  .base--disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .base,
    .viewport {
      transition: none;
    }
  }
`;

export default [styles];