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

.loader {
  animation: loader 3s linear infinite;
}

.inner {
  clip: rect(0.625rem, 1.25rem, 1.25rem, 0);
  animation: loader 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;

  &:before {
    content: '';
    border: 0.188rem solid transparent;
    border-top: 0.188rem solid var(--loader-color, #fff);
    border-radius: 50%;
    animation: loader 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  }

  &:after {
    content: '';
    border: 0.188rem solid var(--loader-color, #fff);
    border-radius: 50%;
    opacity: 0.5;
  }
}

.inner.invert {
  &:before {
    border-top-color: var(--theme-surface-invert);
  }

  &:after {
    border-color: var(--theme-surface-invert);
  }
}

.inner,
.inner:before,
.inner:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
