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

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

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

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

        .vue3-marquee:active>.marquee {
            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
        }