// Name:            Loader
// Description:     Animate loading
//
// Component:       `c-loader`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/spacing' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

// Variables
// ========================================================================

$loader-size: spacing('base');
$loader-border-size: spacing('xxsmall');
$loader-radius: 50%;

// ========================================================================

.c-loader {

  // Custom properties
  // ========================================================================

  --loader-bg: #{$ui-02};
  --loader-animation: #{$ui-06};

  // ========================================================================
  @media (prefers-color-scheme: dark) {
    --loader-bg: #{$ui-03};
    --loader-animation: #{$ui-01};
  }

  // ========================================================================
  &{
    width: $loader-size;
    height: $loader-size;
    border: $loader-border-size solid var(--loader-bg);
    border-top: $loader-border-size solid var(--loader-animation);
    border-radius: $loader-radius;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}

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