/**
 * Copyright Aquera Inc 2026
 *
 * 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';
export const styles = css`
  :host {
    -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));
    display: inline-block;
  }

  .status-light {
    display: inline-flex;
    align-items: center;
    gap: var(--nile-spacing-sm, var(--ng-spacing-2));
    box-sizing: border-box;
  }

  .status-light__dot {
    position: relative;
    flex: none;
    border-radius: var(--nile-radius-full, var(--ng-radius-full));
    width: var(--nile-height-10px, var(--ng-height-10px));
    height: var(--nile-height-10px, var(--ng-height-10px));
    background: var(--nile-colors-gray-light-mode-500, var(--ng-componentcolors-utility-gray-500));
  }

  .status-light__label {
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
    font-style: normal;
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
    letter-spacing: 0.2px;
    color: var(--nile-colors-dark-900, var(--ng-componentcolors-utility-gray-900));
  }

  /* #region Sizes */

  .status-light--small .status-light__dot {
    width: var(--nile-height-8px, var(--ng-height-8px));
    height: var(--nile-height-8px, var(--ng-height-8px));
  }

  .status-light--medium .status-light__dot {
    width: var(--nile-height-10px, var(--ng-height-10px));
    height: var(--nile-height-10px, var(--ng-height-10px));
  }

  .status-light--large .status-light__dot {
    width: var(--nile-height-12px, var(--ng-height-12px));
    height: var(--nile-height-12px, var(--ng-height-12px));
  }

  .status-light--x-large .status-light__dot {
    width: var(--nile-height-14px, var(--ng-height-14px));
    height: var(--nile-height-14px, var(--ng-height-14px));
  }

  .status-light--large .status-light__label,
  .status-light--x-large .status-light__label {
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-md));
  }

 

  .status-light--positive .status-light__dot {
    background: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));
  }

  .status-light--negative .status-light__dot {
    background: var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-500));
  }

  .status-light--notice .status-light__dot {
    background: var(--nile-colors-yellow-500, var(--ng-componentcolors-utility-warning-500));
  }

  .status-light--informative .status-light__dot {
    background: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-blue-light-500));
  }

  .status-light--neutral .status-light__dot {
    background: var(--nile-colors-gray-light-mode-500, var(--ng-componentcolors-utility-gray-500));
  }

  .status-light--inactive .status-light__dot {
    background: var(--nile-colors-gray-light-mode-300, var(--ng-componentcolors-utility-gray-300));
  }

  .status-light--inactive .status-light__label {
    color: var(--nile-colors-text-tertiary, var(--ng-componentcolors-utility-gray-500));
  }

  .status-light--disabled .status-light__dot {
    background: var(--nile-colors-text-disabled, var(--ng-componentcolors-utility-gray-300));
  }

  .status-light--disabled .status-light__label {
    color: var(--nile-colors-text-disabled, var(--ng-colors-text-disabled));
  }

 

  .status-light--pulse .status-light__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: status-light-pulse 1.5s ease-out infinite;
  }

  @keyframes status-light-pulse {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    100% {
      transform: scale(2.5);
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .status-light--pulse .status-light__dot::after {
      animation: none;
    }
  }

  /* #endregion */
`;

export default [styles];