/* Circle spin 1 */

.circle-spin-1 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  width: var(--size);
  height: var(--size);
  border-width: var(--stroke-width);
  border-style: solid;
  border-color: var(--color) var(--color) var(--color) transparent;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-1-animation;
}

@keyframes circle-spin-1-animation {
  from {
    transform: rotate(0deg);
  }

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

/* Circle spin 2 */

.circle-spin-2 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --accent-opacity: .25;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.circle-spin-2::before,
.circle-spin-2::after {
  content: '';
  position: absolute;
  inset: 0;
  border-width: var(--stroke-width);
  border-style: solid;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-2-animation;
}

.circle-spin-2::before {
  border-color: var(--color) var(--color) var(--color) transparent;
  opacity: var(--accent-opacity);
}

.circle-spin-2::after {
  border-color: transparent transparent transparent var(--color);
}

@keyframes circle-spin-2-animation {
  from {
    transform: rotate(0deg);
  }

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

/* Circle spin 3 */

.circle-spin-3 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  width: var(--size);
  height: var(--size);
  border-width: var(--stroke-width);
  border-style: solid;
  border-color: var(--color) transparent var(--color) transparent;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-3-animation;
}

@keyframes circle-spin-3-animation {
  from {
    transform: rotate(0deg);
  }

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

/* Circle spin 4 */

.circle-spin-4 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --color: currentColor;
  --animation-duration: 1s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.circle-spin-4::before,
.circle-spin-4::after {
  content: '';
  position: absolute;
  inset: 0;
  border-width: var(--stroke-width);
  border-style: solid;
  border-color: var(--color) var(--color) transparent transparent;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: var(--animation-duration) infinite circle-spin-4-animation;
}

.circle-spin-4::before {
  animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
}

.circle-spin-4::before {
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes circle-spin-4-animation {
  from {
    transform: rotate(0deg);
  }

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

/* Circle spin 5 */

.circle-spin-5 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 2);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  width: var(--size);
  height: var(--size);
  border-width: var(--stroke-width);
  border-style: solid;
  border-color: var(--color) transparent var(--color) transparent;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-5-animation;
}

@keyframes circle-spin-5-animation {
  from {
    transform: rotate(0deg);
  }

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

/* Circle spin 6 */

.circle-spin-6 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --accent-opacity: .25;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  position: relative;
  width: var(--size);
  height: var(--size);
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-6-animation;
}

.circle-spin-6::before,
.circle-spin-6::after {
  content: '';
  position: absolute;
  background-color: var(--color);
  border-radius: 50%;
}

.circle-spin-6::before {
  inset: 0;
  opacity: var(--accent-opacity);
}

.circle-spin-6::after {
  top: var(--stroke-width);
  left: 50%;
  width: var(--stroke-width);
  height: var(--stroke-width);
  transform: translateX(-50%);
}

@keyframes circle-spin-6-animation {
  from {
    transform: rotate(0deg);
  }

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

/* Circle spin 7 */

.circle-spin-7 {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  width: var(--size);
  height: var(--size);
  mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--size) / 4), black calc(var(--size) / 4));
  background-image: conic-gradient(from 0deg, var(--color) 0deg, var(--color) 10deg, transparent 10deg, transparent 30deg, var(--color) 30deg, var(--color) 50deg, transparent 50deg, transparent 70deg, var(--color) 70deg, var(--color) 90deg, transparent 90deg, transparent 110deg, var(--color) 110deg, var(--color) 130deg, transparent 130deg, transparent 150deg, var(--color) 150deg, var(--color) 170deg, transparent 170deg, transparent 190deg, var(--color) 190deg, var(--color) 210deg, transparent 210deg, transparent 230deg, var(--color) 230deg, var(--color) 250deg, transparent 250deg, transparent 270deg, var(--color) 270deg, var(--color) 290deg, transparent 290deg, transparent 310deg, var(--color) 310deg, var(--color) 330deg, transparent 330deg, transparent 350deg, var(--color) 350deg, var(--color) 360deg);
  border-radius: 50%;
  transform: rotate(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-7-animation;
}

@keyframes circle-spin-7-animation {
  from {
    transform: rotate(0deg);
  }

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

/* Circle spin 8 */

.circle-spin-8 {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  width: var(--size);
  height: var(--size);
  mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--size) / 3), black calc(var(--size) / 3));
  background-image: conic-gradient(transparent, transparent 135deg, currentColor);
  border-radius: 50%;
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-spin-8-animation;
}

@keyframes circle-spin-8-animation {
  from {
    transform: rotate(0deg);
  }

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

/* Circle grow 1 */

.circle-grow-1 {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background-color: var(--color);
  opacity: 0;
  transform: scale(0);
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-grow-1-animation;
}

@keyframes circle-grow-1-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  80% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* Circle pulse 1 */

.circle-pulse-1 {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.circle-pulse-1::before,
.circle-pulse-1::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color);
  border-radius: 50%;
  opacity: 1;
  transform: scale(0);
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-pulse-1-animation;
}

.circle-pulse-1::after {
  animation-delay: calc(var(--animation-duration) / 2);
}

@keyframes circle-pulse-1-animation {
  0% {
    opacity: 1;
    transform: scale(0);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* Circle rotate 1 horizontal */

.circle-rotate-1-horizontal {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  width: var(--size);
  height: var(--size);
  background-color: var(--color);
  border-radius: 50%;
  transform: rotateY(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-rotate-1-horizontal-animation;
}

@keyframes circle-rotate-1-horizontal-animation {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(180deg);
  }
}

/* Circle rotate 1 vertical */

.circle-rotate-1-vertical {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  width: var(--size);
  height: var(--size);
  background-color: var(--color);
  border-radius: 50%;
  transform: rotateX(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-rotate-1-vertical-animation;
}

@keyframes circle-rotate-1-vertical-animation {
  from {
    transform: rotateX(0deg);
  }

  to {
    transform: rotateX(180deg);
  }
}

/* Circle packman 1 */

.circle-packman-1 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 2);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.circle-packman-1::before,
.circle-packman-1::after {
  content: '';
  position: absolute;
  inset: 0;
  border-width: var(--stroke-width);
  border-style: solid;
  border-radius: 50%;
}

.circle-packman-1::before {
  border-color: var(--color) transparent transparent var(--color);
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-packman-1-animation-before;
}

.circle-packman-1::after {
  border-color: transparent transparent var(--color) var(--color);
  animation: var(--animation-timing-function) var(--animation-duration) infinite circle-packman-1-animation-after;
}

@keyframes circle-packman-1-animation-before {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes circle-packman-1-animation-after {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Square spin 1 */

.square-spin-1 {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  width: var(--size);
  height: var(--size);
  background-color: var(--color);
  transform: rotate(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite square-spin-1-animation;
}

@keyframes square-spin-1-animation {
  0% {
    transform: scale(1) rotate(0deg);
  }

  25% {
    transform: scale(.5) rotate(90deg);
  }

  50% {
    transform: scale(1) rotate(180deg);
  }

  75% {
    transform: scale(.5) rotate(270deg);
  }

  100% {
    transform: scale(1) rotate(360deg);
  }
}

/* Square spin 2 */

.square-spin-2 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  width: var(--size);
  height: var(--size);
  background-image:
    radial-gradient(circle at var(--stroke-width) var(--stroke-width), var(--color) 0%, var(--color) var(--stroke-width), transparent var(--stroke-width), transparent 100%),
    radial-gradient(circle at calc(100% - var(--stroke-width)) var(--stroke-width), var(--color) 0%, var(--color) var(--stroke-width), transparent var(--stroke-width), transparent 100%),
    radial-gradient(circle at calc(100% - var(--stroke-width)) calc(100% - var(--stroke-width)), var(--color) 0%, var(--color) var(--stroke-width), transparent var(--stroke-width), transparent 100%),
    radial-gradient(circle at var(--stroke-width) calc(100% - var(--stroke-width)), var(--color) 0%, var(--color) var(--stroke-width), transparent var(--stroke-width), transparent 100%);
  animation: var(--animation-timing-function) var(--animation-duration) infinite square-spin-2-animation;
}

@keyframes square-spin-2-animation {
  from {
    transform: rotate(0deg);
  }

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

/* Square spin 3 */

.square-spin-3 {
  --size: 24px;
  --border-radius: calc(var(--size) / 1.5);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
  transform: translateY(-25%);
  animation: var(--animation-timing-function) calc(var(--animation-duration) / 4) infinite square-spin-3-animation;
}

.square-spin-3::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color);
  transform: rotate(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite square-spin-3-animation-before;
}

@keyframes square-spin-3-animation {
  0% {
    transform: translateY(-25%);
  }

  50% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(-25%);
  }
}

@keyframes square-spin-3-animation-before {
  0% {
    border-radius: 0;
    transform: rotate(0deg);
  }

  12.5% {
    border-radius: 0 0 var(--border-radius) 0;
  }

  25% {
    border-radius: 0;
    transform: rotate(90deg);
  }

  37.5% {
    border-radius: 0 var(--border-radius) 0 0;
  }

  50% {
    border-radius: 0;
    transform: rotate(180deg);
  }

  62.5% {
    border-radius: var(--border-radius) 0 0 0;
  }

  75% {
    border-radius: 0;
    transform: rotate(270deg);
  }

  87.5% {
    border-radius: 0 0 0 var(--border-radius);
  }

  100% {
    border-radius: 0;
    transform: rotate(360deg);
  }
}

/* Square rotate 1 horizontal */

.square-rotate-1-horizontal {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  width: var(--size);
  height: var(--size);
  background-color: var(--color);
  transform: rotateY(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite square-rotate-1-horizontal-animation;
}

@keyframes square-rotate-1-horizontal-animation {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(180deg);
  }
}

/* Square rotate 1 vertical */

.square-rotate-1-vertical {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  width: var(--size);
  height: var(--size);
  background-color: var(--color);
  transform: rotateX(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite square-rotate-1-vertical-animation;
}

@keyframes square-rotate-1-vertical-animation {
  from {
    transform: rotateX(0deg);
  }

  to {
    transform: rotateX(180deg);
  }
}

/* Square rotate 2 */

.square-rotate-2 {
  --size: 24px;
  --accent-opacity: .25;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.square-rotate-2::before,
.square-rotate-2::after {
  content: '';
  position: absolute;
  transform: rotate(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite square-rotate-2-animation;
}

.square-rotate-2::before {
  inset: 0;
  background-color: var(--color);
  opacity: var(--accent-opacity);
}

.square-rotate-2::after {
  top: 12.5%;
  left: 12.5%;
  width: 75%;
  height: 75%;
  background-color: var(--color);
  animation-direction: reverse;
}

@keyframes square-rotate-2-animation {
  from {
    transform: rotate(0deg);
  }

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

/* Square move 1 */

.square-move-1 {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.square-move-1::before {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  bottom: 50%;
  left: 0;
  background-color: var(--color);
  transform: translate(0%, 0%);
  animation: var(--animation-timing-function) var(--animation-duration) infinite square-move-1-animation;
}

@keyframes square-move-1-animation {
  0% {
    transform: translate(0%, 0%);
  }

  25% {
    transform: translate(100%, 0%);
  }

  50% {
    transform: translate(100%, 100%);
  }

  75% {
    transform: translate(0%, 100%);
  }

  100% {
    transform: translate(0%, 0%);
  }
}

/* Square move 2 */

.square-move-2 {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.square-move-2::before,
.square-move-2::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: var(--color);
}

.square-move-2::before {
  top: 0;
  left: 0;
  transform: translate(0%, 0%);
  animation: var(--animation-timing-function) var(--animation-duration) infinite square-move-2-animation-before;
}

.square-move-2::after {
  right: 0;
  bottom: 0;
  transform: translate(0%, 0%);
  animation: var(--animation-timing-function) var(--animation-duration) infinite square-move-2-animation-after;
}

@keyframes square-move-2-animation-before {
  0% {
    transform: translate(0%, 0%);
  }

  25% {
    transform: translate(100%, 0%);
  }

  50% {
    transform: translate(100%, 100%);
  }

  75% {
    transform: translate(0%, 100%);
  }

  100% {
    transform: translate(0%, 0%);
  }
}

@keyframes square-move-2-animation-after {
  0% {
    transform: translate(0%, 0%);
  }

  25% {
    transform: translate(-100%, 0%);
  }

  50% {
    transform: translate(-100%, -100%);
  }

  75% {
    transform: translate(0%, -100%);
  }

  100% {
    transform: translate(0%, 0%);
  }
}

/* Square move 3 */

.square-move-3 {
  --size: 24px;
  --color: currentColor;
  --accent-opacity: .25;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.square-move-3::before,
.square-move-3::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background-color: var(--color);
  transform: translate(0%, 0%);
  animation: var(--animation-timing-function) var(--animation-duration) infinite square-move-3-animation;
}

.square-move-3::before {
  opacity: var(--accent-opacity);
  animation-delay: calc(var(--animation-duration) * .125);
}

@keyframes square-move-3-animation {
  0% {
    transform: translate(0%, 0%);
  }

  12.5% {
    transform: translate(100%, 0%);
  }

  25% {
    transform: translate(100%, 0%);
  }

  37.5% {
    transform: translate(100%, 100%);
  }

  50% {
    transform: translate(100%, 100%);
  }

  62.5% {
    transform: translate(0%, 100%);
  }

  75% {
    transform: translate(0%, 100%);
  }

  87.5% {
    transform: translate(0%, 0%);
  }

  100% {
    transform: translate(0%, 0%);
  }
}


/* Square fill 1 */

.square-fill-1 {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: steps(2, start);
  --animation-duration: 4s;
  display: flex;
  flex-direction: column;
  width: var(--size);
  height: var(--size);
}

.square-fill-1::before,
.square-fill-1::after {
  content: '';
  width: 100%;
  height: 50%;
  background-color: var(--color);
  transform: scaleX(0);
}

.square-fill-1::before {
  align-self: flex-start;
  transform-origin: center left;
  animation: var(--animation-timing-function) var(--animation-duration) infinite square-fill-1-animation-before;
}

.square-fill-1::after {
  align-self: flex-end;
  transform-origin: center right;
  animation: var(--animation-timing-function) var(--animation-duration) infinite square-fill-1-animation-after;
  animation-delay: calc(var(--animation-duration) / 4);
}

@keyframes square-fill-1-animation-before {
  0% {
    transform: scaleX(0);
    transform-origin: center left;
  }

  25% {
    transform: scaleX(1);
    transform-origin: center left;
  }

  50% {
    transform: scaleX(1);
    transform-origin: center right;
  }

  75% {
    transform: scaleX(0);
    transform-origin: center right;
  }

  100% {
    transform: scaleX(0);
    transform-origin: center right;
  }
}

@keyframes square-fill-1-animation-after {
  0% {
    transform: scaleX(0);
    transform-origin: center right;
  }

  25% {
    transform: scaleX(1);
    transform-origin: center right;
  }

  50% {
    transform: scaleX(1);
    transform-origin: center left;
  }

  75% {
    transform: scaleX(0);
    transform-origin: center left;
  }

  100% {
    transform: scaleX(0);
    transform-origin: center left;
  }
}

/* Line 1 horizontal */

.line-1-horizontal {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --color: currentColor;
  --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  --animation-duration: 2s;
  width: var(--size);
  height: var(--stroke-width);
  background-color: var(--color);
  transform: scaleX(0);
  transform-origin: center left;
  animation: var(--animation-timing-function) var(--animation-duration) infinite line-1-horizontal-animation;
}

@keyframes line-1-horizontal-animation {
  0% {
    transform: scaleX(0);
    transform-origin: center left;
  }

  50% {
    transform: scaleX(1);
    transform-origin: center left;
  }

  51% {
    transform: scaleX(1);
    transform-origin: center right;
  }

  100% {
    transform: scaleX(0);
    transform-origin: center right;
  }
}

/* Line 1 vertical */

.line-1-vertical {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --color: currentColor;
  --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  --animation-duration: 2s;
  width: var(--stroke-width);
  height: var(--size);
  background-color: var(--color);
  transform: scaleY(0);
  transform-origin: top center;
  animation: var(--animation-timing-function) var(--animation-duration) infinite line-1-vertical-animation;
}

@keyframes line-1-vertical-animation {
  0% {
    transform: scaleY(0);
    transform-origin: top center;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top center;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom center;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom center;
  }
}

/* Line 2 horizontal */

.line-2-horizontal {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.line-2-horizontal::before,
.line-2-horizontal::after {
  content: '';
  position: absolute;
  transform: scaleY(1);
  animation: var(--animation-timing-function) var(--animation-duration) infinite line-2-horizontal-animation;
}

.line-2-horizontal::before {
  inset: 0;
  border-top: var(--stroke-width) solid var(--color);
  border-bottom: var(--stroke-width) solid var(--color);
}

.line-2-horizontal::after {
  top: calc(50% - var(--stroke-width) / 2);
  right: 0;
  left: 0;
  border-top: var(--stroke-width) solid var(--color);
  animation-delay: calc(var(--animation-duration) / 2);
}

@keyframes line-2-horizontal-animation {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scaleX(.5);
  }

  100% {
    transform: scaleX(1);
  }
}

/* Line 2 vertical */

.line-2-vertical {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.line-2-vertical::before,
.line-2-vertical::after {
  content: '';
  position: absolute;
  transform: scaleY(1);
  animation: var(--animation-timing-function) var(--animation-duration) infinite line-2-vertical-animation;
}

.line-2-vertical::before {
  inset: 0;
  border-right: var(--stroke-width) solid var(--color);
  border-left: var(--stroke-width) solid var(--color);
}

.line-2-vertical::after {
  top: 0;
  bottom: 0;
  left: calc(50% - var(--stroke-width) / 2);
  border-left: var(--stroke-width) solid var(--color);
  animation-delay: calc(var(--animation-duration) / 2);
}

@keyframes line-2-vertical-animation {
  0% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(.5);
  }

  100% {
    transform: scaleY(1);
  }
}

/* Line 3 vertical */

.line-3-horizontal {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --scale: calc(4 / 24);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.line-3-horizontal::before,
.line-3-horizontal::after {
  content: '';
  position: absolute;
  transform: scaleY(1);
  animation: var(--animation-timing-function) var(--animation-duration) infinite line-3-horizontal-animation;
}

.line-3-horizontal::before {
  inset: 0;
  border-top: var(--stroke-width) solid var(--color);
  border-bottom: var(--stroke-width) solid var(--color);
}

.line-3-horizontal::after {
  top: calc(50% - var(--stroke-width) / 2);
  right: 0;
  left: 0;
  border-top: var(--stroke-width) solid var(--color);
}

@keyframes line-3-horizontal-animation {
  0% {
    transform: scaleX(1);
  }

  25% {
    transform: scaleX(var(--scale));
  }

  75% {
    transform: scaleX(var(--scale));
  }

  100% {
    transform: scaleX(1);
  }
}

/* Line 3 vertica */

.line-3-vertical {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --scale: calc(4 / 24);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.line-3-vertical::before,
.line-3-vertical::after {
  content: '';
  position: absolute;
  transform: scaleY(1);
  animation: var(--animation-timing-function) var(--animation-duration) infinite line-3-vertical-animation;
}

.line-3-vertical::before {
  inset: 0;
  border-right: var(--stroke-width) solid var(--color);
  border-left: var(--stroke-width) solid var(--color);
}

.line-3-vertical::after {
  top: 0;
  bottom: 0;
  left: calc(50% - var(--stroke-width) / 2);
  border-left: var(--stroke-width) solid var(--color);
}

@keyframes line-3-vertical-animation {
  0% {
    transform: scaleY(1);
  }

  25% {
    transform: scaleY(var(--scale));
  }

  75% {
    transform: scaleY(var(--scale));
  }

  100% {
    transform: scaleY(1);
  }
}

/* Arrow 1 up */

.arrow-1-up {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
  overflow-y: hidden;
}

.arrow-1-up::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color);
  clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 75% 50%, 75% 100%, 25% 100%, 25% 50%, 0% 50%);
  transform: translateY(-100%);
  animation: var(--animation-timing-function) var(--animation-duration) infinite arrow-1-up-animation;
}

@keyframes arrow-1-up-animation {
  0% {
    transform: translateY(100%);
  }

  45% {
    transform: translateY(0%);
  }

  55% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(-100%);
  }
}

/* Arrow 1 right */

.arrow-1-right {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
  overflow-x: hidden;
}

.arrow-1-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color);
  clip-path: polygon(0% 25%, 50% 25%, 50% 0%, 100% 50%, 50% 100%, 50% 75%, 0% 75%, 0% 25%);
  transform: translateX(-100%);
  animation: var(--animation-timing-function) var(--animation-duration) infinite arrow-1-right-animation;
}

@keyframes arrow-1-right-animation {
  0% {
    transform: translateX(-100%);
  }

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

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

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

/* Arrow 1 down */

.arrow-1-down {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
  overflow-y: hidden;
}

.arrow-1-down::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color);
  clip-path: polygon(0% 50%, 50% 100%, 100% 50%, 75% 50%, 75% 0%, 25% 0%, 25% 50%, 0% 50%);
  transform: translateY(-100%);
  animation: var(--animation-timing-function) var(--animation-duration) infinite arrow-1-down-animation;
}

@keyframes arrow-1-down-animation {
  0% {
    transform: translateY(-100%);
  }

  45% {
    transform: translateY(0%);
  }

  55% {
    transform: translateY(0%);
  }

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

/* Arrow 1 left */

.arrow-1-left {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
  overflow-x: hidden;
}

.arrow-1-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color);
  clip-path: polygon(0% 50%, 50% 0%, 50% 25%, 100% 25%, 100% 75%, 50% 75%, 50% 100%, 0% 50%);
  transform: translateX(100%);
  animation: var(--animation-timing-function) var(--animation-duration) infinite arrow-1-left-animation;
}

@keyframes arrow-1-left-animation {
  0% {
    transform: translateX(100%);
  }

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

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

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

/* Plus 1 */

.plus-1 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 4s;
  position: relative;
  width: var(--size);
  height: var(--size);
  animation: var(--animation-timing-function) var(--animation-duration) infinite plus-1-animation;
}

.plus-1::before,
.plus-1::after {
  content: '';
  position: absolute;
  background-color: var(--color);
}

.plus-1::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--stroke-width);
  transform: translateY(-50%);
}

.plus-1::after {
  top: 0;
  left: 50%;
  width: var(--stroke-width);
  height: 100%;
  transform: translateX(-50%);
}

@keyframes plus-1-animation {
  0% {
    transform: rotate(0deg);
  }

  2.5% {
    transform: rotate(0deg);
  }

  22.5% {
    transform: rotate(90deg);
  }

  27.5% {
    transform: rotate(90deg);
  }

  47.5% {
    transform: rotate(180deg);
  }

  52.5% {
    transform: rotate(180deg);
  }

  72.5% {
    transform: rotate(270deg);
  }

  77.5% {
    transform: rotate(270deg);
  }

  97.5% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Misc 1 horizontal */

.misc-1-horizontal {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: calc(var(--size) / 2);
  border-radius: var(--size);
  overflow-x: hidden;
}

.misc-1-horizontal::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color);
  border-radius: inherit;
  transform: translateX(calc(var(--size) / 2 - 100%));
  animation: var(--animation-timing-function) var(--animation-duration) infinite misc-1-horizontal-animation;
}

@keyframes misc-1-horizontal-animation {
  0% {
    transform: translateX(calc(var(--size) / 2 - 100%));
  }

  50% {
    transform: translateX(calc(100% - var(--size) / 2));
  }

  100% {
    transform: translateX(calc(var(--size) / 2 - 100%));
  }
}

/* Misc 1 vertical */

.misc-1-vertical {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  position: relative;
  width: calc(var(--size) / 2);
  height: var(--size);
  border-radius: var(--size);
  overflow-y: hidden;
}

.misc-1-vertical::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color);
  border-radius: inherit;
  transform: translateY(calc(var(--size) / 2 - 100%));
  animation: var(--animation-timing-function) var(--animation-duration) infinite misc-1-vertical-animation;
}

@keyframes misc-1-vertical-animation {
  0% {
    transform: translateY(calc(var(--size) / 2 - 100%));
  }

  50% {
    transform: translateY(calc(100% - var(--size) / 2));
  }

  100% {
    transform: translateY(calc(var(--size) / 2 - 100%));
  }
}

/* Typing 1 */

.typing-1 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-bottom: var(--stroke-width) solid var(--color);
}

.typing-1::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: calc(var(--stroke-width) / 2);
  left: 0;
  width: calc(var(--stroke-width) * 1.25);
  background-color: var(--color);
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
  transform: translateX(0) rotate(10deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite typing-1-animation;
}

@keyframes typing-1-animation {
  0% {
    transform: translateX(0) rotate(10deg);
  }

  85% {
    transform: translateX(var(--size)) rotate(10deg);
  }

  100% {
    transform: translateX(0) rotate(10deg);
  }
}