/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../../../styling/defs.scss' as bk;

@layer baklava.components {
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  .bk-spinner {
    @include bk.component-base(bk-spinner);

    --bk-spinner-large-size: 88px;
    --bk-spinner-large-thickness: 6px;

    --bk-spinner-medium-size: 55px;
    --bk-spinner-medium-thickness: 4px;

    --bk-spinner-small-size: 18px;
    --bk-spinner-small-thickness: 2px;

    --antialias: 1px;
    --progress: 0.6turn;
    
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(bk.$theme-spinner-fill var(--progress), bk.$theme-spinner-track var(--progress));
    
    // Note: for spinners the animation should be included even if `prefers-reduced-motion` is set
    animation: spin 1s linear infinite;

    &.bk-spinner--large {
      inline-size: var(--bk-spinner-large-size);
      --mask-radius: calc(70% - calc(var(--bk-spinner-large-thickness)*1.5) / 100 * 70);
      mask-image: radial-gradient(transparent 0 var(--mask-radius), black calc(var(--mask-radius) + var(--antialias)));
    }

    &.bk-spinner--medium {
      inline-size: var(--bk-spinner-medium-size);
      --mask-radius: calc(70% - calc(var(--bk-spinner-medium-thickness)*1.5) / 100 * 70);
      mask-image: radial-gradient(transparent 0 var(--mask-radius), black calc(var(--mask-radius) + var(--antialias)));
    }

    &.bk-spinner--small {
      inline-size: var(--bk-spinner-small-size);
      --mask-radius: calc(70% - calc(var(--bk-spinner-small-thickness)*2) / 100 * 70);
      mask-image: radial-gradient(transparent 0 var(--mask-radius), black calc(var(--mask-radius) + var(--antialias)));
    }
    
    display: block;
    &.bk-spinner--inline {
      display: inline-block;
    }
  }
}
