/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@charset "UTF-8";

// Spinner by CSS Wizadry: http://jsfiddle.net/csswizardry/M2D4M/

// A simple, semantic, usable-anywhere spinner. It takes its coloring from its
// parent element, meaning it can be dropped anywhere without modification.

// 1. Positioning context.
// 2. Define dimensions in ems so that we can…
// 3. …adjust spinner size by just changing its `font-size`.
// 4. Do not explicitly define a color (allow border to inherit current text
//   color). This makes the spinner usable on any color background. We’re also
//   only defining a bottom border here; this is what actually gives the
//   illusion of something spinning.
// 5. Kellum method hidden text:
//   zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement

.spinner {
  @include animation(0.5s spinner linear infinite);
  border-bottom: 1px solid; // 4
  display: inline-block;
  font-size: 32px; // 3
  height: 1em; // 2
  overflow: hidden;  // 5
  position: relative; // 1
  text-indent: 100%; // 5
  vertical-align: middle;
  width: 1em; // 2

     // 1. Make the spinner a circle.
  &,
  &:after {
    border-radius: 100%; // 1
  }

  // The (optically) non-spinning part of the spinner.
  // 1. Border around entire element fills in the rest of the ring.
  // 2. Paler than the part that appears to spin.
  &:after {
    border: 1px solid; // 1
    bottom: 0;
    content: '';
    left: 0;
    opacity: 0.5; // 2
    position: absolute;
    right: 0;
    top: 0;
  }
}

// Size variants (built by adjusting `font-size`).
.spinner--small { font-size: 16px; }
.spinner--large { font-size: 64px; }

// Color overrides.
.spinner--light { color: $white; }
.spinner--dark { color: #333; }

.spinner--center {
  display: block;
  margin: 0 auto;
}

.spinner--padded {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

@-webkit-keyframes spinner {

  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes spinner {

  to {
    -moz-transform: rotate(360deg);
  }
}

@keyframes spinner {

  to {
    transform: rotate(360deg);
  }
}