.vue3-marquee {
    display: flex!important;
    position: relative
}

.vue3-marquee.horizontal {
    overflow-x: hidden!important;
    flex-direction: row!important;
    width: 100%;
    height: -moz-max-content;
    height: max-content
}

.vue3-marquee.vertical {
    overflow-y: hidden!important;
    flex-direction: column!important;
    height: 100%;
    width: -moz-max-content;
    width: max-content
}

.vue3-marquee:hover div {
    animation-play-state: var(--pauseOnHover)
}

.vue3-marquee:active div {
    animation-play-state: var(--pauseOnClick)
}

.vue3-marquee>.marquee {
    flex: 0 0 auto;
    min-width: var(--min-width);
    min-height: var(--min-height);
    z-index: 1;
    animation: var(--orientation) var(--duration) linear var(--delay) var(--loops);
    animation-play-state: var(--pauseAnimation);
    animation-direction: var(--direction)
}

.vue3-marquee.horizontal>.marquee {
    display: flex;
    flex-direction: row;
    align-items: center
}

.vue3-marquee.vertical>.marquee {
    display: flex;
    flex-direction: column;
    align-items: center
}

@keyframes scrollX {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-100%)
    }
}

@keyframes scrollY {
    0% {
        transform: translateY(0)
    }

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

.vue3-marquee>.overlay {
    position: absolute;
    width: 100%;
    height: 100%
}

.vue3-marquee>.transparent-overlay {
    position: absolute;
    width: 100%;
    height: 100%
}

.vue3-marquee>.overlay:before,.vue3-marquee>.overlay:after {
    content: "";
    position: absolute;
    z-index: 2
}

.vue3-marquee.horizontal>.overlay:before,.vue3-marquee.horizontal>.overlay:after {
    background: linear-gradient(to right,var(--gradient-color));
    height: 100%;
    width: var(--gradient-length)
}

.vue3-marquee.vertical>.overlay:before,.vue3-marquee.vertical>.overlay:after {
    background: linear-gradient(to bottom,var(--gradient-color));
    height: var(--gradient-length);
    width: 100%
}

.vue3-marquee.horizontal>.overlay:after {
    transform: rotate(180deg)
}

.vue3-marquee.vertical>.overlay:after {
    transform: rotate(-180deg)
}

.vue3-marquee>.overlay:before {
    left: 0;
    top: 0
}

.vue3-marquee.horizontal>.overlay:after {
    right: 0;
    top: 0
}

.vue3-marquee.vertical>.overlay:after {
    left: 0;
    bottom: 0
}