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

/**
 * Carousel CSS
 */
export const styles = css`
  :host {
    --slide-gap: var(--nile-spacing-md, var(--ng-spacing-md));
    display: block;
    position: relative;
  }

  .carousel {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .carousel__content-wrapper {
    display: flex;
    align-items: center;
    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
    width: 100%;
    position: relative;
  }

  .carousel__navigation-wrapper--top-right {
    display: flex;
    justify-content: flex-end;
    gap: var(--nile-spacing-md, var(--ng-spacing-md));
    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
  }

  .carousel__slides {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: var(--slide-gap);
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    min-width: 0;
  }

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

  .carousel__slides:focus {
    outline: none;
  }

  .carousel__slides:focus-visible {
    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
    outline-offset: 2px;
  }

  ::slotted(nile-carousel-item) {
    flex: 0 0 calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
    min-width: 0;
  }

  .carousel__navigation-button--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  .carousel__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
    margin-top: var(--nile-spacing-md, var(--ng-spacing-md));
    position: relative;
    z-index: 2;
  }

  .carousel__pagination-item {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
    border: 2px solid var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease, border-color 0.1s ease, width 0.1s ease, height 0.1s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  .carousel__pagination-item:hover {
    background: var(--nile-colors-neutral-400, var(--ng-colors-border-tertiary));
    transform: scale(1.15);
    border-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary));
  }

  .carousel__pagination-item--active {
    width: 0.875rem;
    height: 0.875rem;
    background: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
    border-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  .carousel__pagination-item:focus {
    outline: none;
  }

  .carousel__pagination-item:focus-visible {
    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
    outline-offset: 2px;
  }

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

export default [styles];