@keyframes ty-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ty-rotate-reverse {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes ty-processing {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}
.ty-loader {
  position: relative;
  display: inline-block;
  color: var(--ty-color-primary);
}
.ty-loader__indicator {
  position: relative;
  display: inline-block;
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--ty-loader-border-width) solid transparent;
  border-right-color: currentcolor;
  margin: 5px;
  animation: ty-loader-spin 1s infinite linear;
}
.ty-loader__indicator::before, .ty-loader__indicator::after {
  content: "";
  position: absolute;
  inset: calc(var(--ty-loader-border-width) * -1);
  border-radius: 50%;
  border: inherit;
  animation: inherit;
  animation-duration: 2s;
}
.ty-loader__indicator::after {
  animation-duration: 4s;
}
.ty-loader__indicator_sm {
  --ty-loader-border-width: 2px;
  width: 16px;
}
.ty-loader__indicator_md {
  --ty-loader-border-width: 3px;
  width: 24px;
}
.ty-loader__indicator_lg {
  --ty-loader-border-width: 4px;
  width: 36px;
}
.ty-loader__label {
  margin: 5px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.8;
  font-size: 16px;
}
.ty-loader__loader-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 5;
  color: var(--ty-color-primary);
}
.ty-loader__loader-container:not(:last-child) {
  position: absolute;
}
.ty-loader__loader-container_vertical {
  flex-direction: column;
}
.ty-loader__container_loading {
  opacity: 0.5;
}
.ty-loader__container_blurred {
  filter: blur(1px);
  overflow: hidden;
}

@keyframes ty-loader-spin {
  100% {
    transform: rotate(1turn);
  }
}