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

/**
* Slider CSS
*/
export const styles = css`
  :host {
    display: block;
  }

  /* Field header  */

  .field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--nile-spacing-md, var(--ng-spacing-md));
    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
  }

  .field-label {
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
  }

  /* Layout  */

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--nile-spacing-md, var(--ng-spacing-md));
    min-height: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
  }

  .align-item-center {
    align-items: center;
  }

  slot.span {
    font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));
  }

  .range-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
  }

  .column-reverse {
    flex-direction: column-reverse;
  }

  .label-container {
    display: flex;
    justify-content: space-between;
  }

  .label-container span {
    margin: var(--nile-spacing-none, var(--ng-spacing-none));
    padding: var(--nile-spacing-none, var(--ng-spacing-none));
    font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));
    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
  }

  /* track & fill  */

  .range {
    position: relative;
    width: var(--nile-slider-width, 228px);
    height: var(--nile-spacing-xs, var(--ng-spacing-sm));
    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));
    user-select: none;
    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));
  }

  .range:hover {
    cursor: pointer;
  }

  .range-completed {
    position: absolute;
    height: 100%;
    width: 0%;
    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
    top: 0px;
    left: 0px;
    z-index: 98;
    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));
  }

  /* ------------------------------------------------------------------ */
  /* Inline value label (valueLabel="bottom")                            */
  /* ------------------------------------------------------------------ */

  .value-label {
    position: absolute;
    /* Start at the track bottom, then push down past the handle and the
       largest (pressed, 8px) ring */
    top: 100%;
    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));
    transform: translateX(-50%);
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));
    font-variant-numeric: tabular-nums;
    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Reserve room below the track for the inline value label */
  :host([valuelabel='bottom']) .container {
    padding-bottom: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
  }

  /* Handles    */

  .range-button,
  .range-button-two {
    height: var(--nile-spacing-lg, var(--ng-spacing-2xl));
    width: var(--nile-spacing-lg, var(--ng-spacing-2xl));
    box-sizing: border-box;
    /* Enterprise: solid brand dot - NextGen: white fill + brand border */
    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary));
    border: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) solid
      var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));
    left: 0;
    z-index: 100;
    cursor: grab;
    transition:
      box-shadow var(--nile-transition-duration-short, 120ms) ease,
      background-color var(--nile-transition-duration-short, 120ms) ease,
      transform var(--nile-transition-duration-shorter, 80ms) ease;
  }

  .range-button-two {
    left: 100%;
  }

  /* Hover: ring (Enterprise 2px - NextGen 6px) */
  .range-button:hover,
  .range-button-two:hover {
    cursor: grab;
    box-shadow: 0 0 0 var(--nile-spacing-xxs, var(--ng-spacing-sm))
      var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));
  }

  /* Focused: theme focus ring */
  .range-button:focus-visible,
  .range-button-two:focus-visible {
    outline: none;
    box-shadow: var(--nile-focus-ring,
      var(--ng-focus-ring,
        0 0 0 var(--nile-spacing-xs) var(--nile-colors-primary-100)));
  }

  /* Pressed: ring (Enterprise 4px - NextGen 8px) + 1.1x scale */
  .range-button:active,
  .range-button-two:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 0 var(--nile-spacing-xs, var(--ng-spacing-md))
      var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));
  }

  /* Error state    */
  :host([error]) .range-completed {
    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));
  }

  :host([error]) .range-button,
  :host([error]) .range-button-two {
    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-primary));
    border-color: var(--nile-colors-red-700, var(--ng-colors-border-error));
  }

  :host([error]) .range-button:hover,
  :host([error]) .range-button-two:hover {
    box-shadow: 0 0 0 var(--nile-spacing-xxs, var(--ng-spacing-sm))
      var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary, var(--ng-color-error-100)));
  }

  :host([error]) .range-button:focus-visible,
  :host([error]) .range-button-two:focus-visible {
    box-shadow: var(--nile-focus-ring-error,
      var(--ng-focus-ring-error,
        0 0 0 var(--nile-spacing-xs) var(--nile-colors-red-100)));
  }

  /* Disabled state */
  :host([disabled]) .range,
  :host([disabled]) .range:hover {
    cursor: not-allowed;
    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));
  }

  :host([disabled]) .range-completed {
    background-color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
  }

  :host([disabled]) .range-button,
  :host([disabled]) .range-button-two {
    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));
    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
    cursor: not-allowed;
  }

  :host([disabled]) .range-button:hover,
  :host([disabled]) .range-button-two:hover,
  :host([disabled]) .range-button:active,
  :host([disabled]) .range-button-two:active {
    box-shadow: none;
    transform: translate(-50%, -50%);
  }

  :host([disabled]) .field-label,
  :host([disabled]) .value-label,
  :host([disabled]) .label-container span {
    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
    user-select: none;
    -webkit-user-select: none;
  }
`;

export default [styles];