%nio-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba($palette-white, 0.8);
  @supports (backdrop-filter: blur(2px)) {
    backdrop-filter: blur(2px);
    background-color: rgba($palette-white, 0.5);
  }
}

%nio-loader__result {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0; height: 0;
  overflow: hidden;
  color: transparent;
  background-color: $palette-primary;
  border-radius: 50%;
  transition:
    width 333ms ease-in,
    height 333ms ease-in,
    color 125ms ease-in,
    font-size 500ms cubic-bezier(0,1.58,.18,1) 125ms,
    border-radius 125ms ease-in;
  font-size: 0;
  text-shadow: 0 0.125em 0.25em rgba(black, 0.5);
  transform: translate(-50%, -50%);
}

%nio-loader__result--affirmative { background-color: $palette-affirmative; }
%nio-loader__result--danger { background-color: $palette-danger; }
%nio-loader__result--warning { background-color: $palette-warning; }

%nio-loader__result--is-complete {
  font-size: 1rem;
  width: 141vmin; height: 141vmin;
  color: white;
}

%nio-loader__result-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 3em;
  transform: translatey(-25%) translate(-50%, -50%);
}

%nio-loader__result-message {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  font-size: 1.5em;
  text-align: center;
  transform: translatey(1rem);
}

%nio-loader__decoration {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
}

%nio-loader__decoration--outer {
  background-color: rgba($palette-primary, 0.15);
  $animation: unique-id();
  animation: $animation 1s infinite ease-in-out;
  animation-delay: -0.25s;
  @keyframes #{$animation} {
    from, to { transform: translate(-50%, -50%) scale(2.5); }
    50% { transform: translate(-50%, -50%) scale(1.5); }
  }
}

%nio-loader__decoration--middle {
  background-color: rgba($palette-primary, 0.15);
  $animation: unique-id();
  animation: $animation 1s infinite ease-in-out;
  animation-delay: -0.333s;
  @keyframes #{$animation} {
    from, to { transform: translate(-50%, -50%) scale(1.75); }
    50% { transform: translate(-50%, -50%) scale(1.25); }
  }
}

%nio-loader__decoration--inner {
  background-color: $palette-primary;
  $animation: unique-id();
  animation: $animation 1s infinite ease-in-out;
  @keyframes #{$animation} {
    from, to { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(0.75); }
  }
}