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

/**
 * Dot Stepper CSS
 */
export const styles = css`
  :host {
    display: inline-block;
    -webkit-font-smoothing: var(
      --nile-webkit-font-smoothing,
      var(--ng-webkit-font-smoothing)
    );
    -moz-osx-font-smoothing: var(
      --nile-moz-osx-font-smoothing,
      var(--ng-moz-osx-font-smoothing)
    );
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
  }

  .dots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));
    align-items: center;
  }

  .dot {
    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 50%;
    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));
    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));
    transition: background-color 0.2s ease-out, transform 0.2s ease-out;
  }

  .dot--active {
    background: var(
      --nile-colors-primary-600,
      var(--ng-colors-text-brand-secondary-700)
    );
  }

  /* Sizes */
  .dot--sm {
    width: var(--nile-spacing-4px, var(--ng-spacing-1));
    height: var(--nile-spacing-4px, var(--ng-spacing-1));
  }

  .dot--md {
    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));
    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));
  }

  .dot--lg {
    width: var(--nile-spacing-14px, var(--ng-spacing-3-5));
    height: var(--nile-spacing-14px, var(--ng-spacing-3-5));
  }

  .dots:has(.dot--sm) {
    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
  }

  .dots:has(.dot--lg) {
    gap: var(--nile-spacing-2-x, var(--ng-spacing-3));
  }

  .dot:focus-visible {
    outline: var(--nile-spacing-2px, var(--ng-spacing-0-5)) solid
      var(--nile-colors-stroke-strong-950, var(--ng-colors-border-secondary));
    outline-offset: var(--nile-spacing-2px, var(--ng-spacing-0-5));
  }

  :host([disabled]) .dot,
  .dot:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
`;
export default [styles];