/* 所有的photo_drag_line开头的 */
[class^='photo_drag_line'] {
  display: flex;
  align-items: center;
}


.photo_drag_line_top {

  writing-mode: horizontal-tb;
  direction: ltr;
  .text-arrow {
    animation: drag_line_top 0.5s linear infinite;
    & > svg {
      transform: rotate(180deg);
    }
  }
}


.photo_drag_line_left {
  writing-mode: sideways-lr;
  direction: rtl;
  .text-arrow {
    animation: drag_line_left 0.5s linear infinite;
    & > svg {
      transform: rotate(-90deg);
    }
  }
}

/* right/bottom用lr模板 */
.photo_drag_line_right {

  writing-mode: vertical-lr;
  direction: rtl;
  .text-arrow {
    animation: drag_line_right 0.5s linear infinite;
    & > svg {
      transform: rotate(90deg);
    }
  }
}

.photo_drag_line_bottom {
  writing-mode: horizontal-tb;
  direction: rtl;
  .text-arrow {
    animation: drag_line_bottom 0.5s linear infinite;
    & > svg {
      transform: rotate(0deg);
    }
  }
}


/* 动画中的元素容器 */
.text-arrow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding-inline: 25px;
}

/* text-arrows 的子元素 p */
.text-arrow > p {
  font-family: "Archivo Black";
  font-size: 48px;
  font-weight: bold;
  color: var(--mio-blue-text-border);
  /* text-shadow: 2px 2px 3px var(--mio-blue-text-light-fill); */
}

@keyframes drag_line_top {
  to {

      transform: translateX(-100%);
  }
}

@keyframes drag_line_bottom {
  to {
      transform: translateX(100%);
  }
}

@keyframes drag_line_right {
  to {
    transform: translateY(100%);
  }
}

@keyframes drag_line_left {
  to {
    transform: translateY(-100%);
  }
}