.hl-marquee {
  position: relative;
  display: flex;
  align-items: center;
  &__vertical {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    .slide-enter-active,
    .slide-leave-active {
      transition: all linear;
      transition-duration: 0.4s;
    }
    .slide-enter {
      transform: translateY(100%) scale(1);
    }
    .slide-leave-to {
      transform: translateY(-100%);
    }
  }
  &__vertical-text {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
  }
  &__wrap {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    overflow: hidden;

    &--vertical {
      flex-direction: column;
      width: 100%;
    }

    &--horizontal {
      flex-direction: row;
      height: 100%;
    }
  }

  &__content {
    position: absolute;
    white-space: nowrap;
    transition-timing-function: linear;
  }

  &__text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    &--vertical {
      display: block;
      margin-top: 4px;
    }

    &--horizontal {
      display: inline-block;
      margin-left: 8px;
    }
  }
}