:host {
  --loader-symbol-size: var(--spacing-16);
  --loader-type: var(--type-body-base);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

:host(.xs) {
  --loader-symbol-size: var(--spacing-8);
  --loader-type: var(--type-body-sm);
}

:host(.sm) {
  --loader-symbol-size: var(--spacing-12);
  --loader-type: var(--type-body-sm);
}

:host(.lg) {
  --loader-symbol-size: var(--spacing-20);
  --loader-type: var(--type-body-lg);
}

:host(.xl) {
  --loader-symbol-size: var(--spacing-24);
  --loader-type: var(--type-body-2xl);
}

.frame {
  position: relative;
  width: var(--loader-symbol-size);
  height: var(--loader-symbol-size);
}

.text {
  font: var(--loader-type);
  text-align: center;
  font-weight: 500;
  color: var(--color-text-brand-base);
}

.symbol {
  position: absolute;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;

  background-color: var(--color-background-brand-base);
  -webkit-mask-image: var(--symbol);
          mask-image: var(--symbol);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 90% 90%;
          mask-size: 90% 90%;
  -webkit-mask-position: center;
          mask-position: center;

  transform: translateX(-100%);
  opacity: 0;
}

.symbol.animate-in {
  animation:
    slide-in 1s cubic-bezier(0.83, 0, 0.17, 1) forwards,
    fade-in 1s ease-in-out forwards;
}

.symbol.animate-out {
  animation:
    slide-out 1s cubic-bezier(0.83, 0, 0.17, 1) forwards,
    fade-out 1s ease-in-out forwards;
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes fade-in {
  0%,
  50% {
    opacity: 0;
  }

  80%,
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0%,
  40% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}