import { css } from 'lit';

export default css`
  :host {
    --loader-spacing: var(--nile-spacing-lg, var(--ng-spacing-xl));
    --loader-label-font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));
    --loader-label-line-height: var(--nile-line-height-small,var(--ng-line-height-text-sm));
    -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));
  }

  .loader__container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--loader-spacing);
  }

  .loader__container--sm {}

  .loader__container--md {}

  .loader__container--lg {
    --loader-label-font-size: var(--nile-type-scale-5,var(--ng-font-size-text-lg));
    --loader-label-line-height: var(--nile-line-height-large,var(--ng-line-height-text-lg));
  }
  
  .loader__container--xl {
    --loader-spacing: var(--nile-spacing-xl,var(--ng-spacing-xl));
    --loader-label-font-size: var(--nile-type-scale-5,var(--ng-font-size-text-lg));
    --loader-label-line-height: var(--nile-line-height-large,var(--ng-line-height-text-lg));
  }

  .svg__container {
    display: flex;
    position: relative;
    transform: translate(50%, 50%);
  }

  .loader__label {
    font-size: var(--loader-label-font-size);
    line-height: var(--loader-label-line-height); 
    font-family:var(--nile-font-family-sans-serif, var(--ng-font-family-body));
    font-style: normal;
    font-weight: var(--nile-font-weight-medium,var(--ng-font-weight-medium));
  }

  .nile-loader__v1 {
    border-radius: 50%;
    display: inline-block;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    box-shadow: 0 1px 1px -1px currentColor;
    box-sizing: border-box;
    animation: rotation 0.5s linear infinite;
  }

  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .nile-loader__v2,
  .nile-loader__v3 {
    animation: spin 1.5s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
`;