@use '../utils' as *;

/*=============================
    Marquee 01
===============================*/
.marquee-wrap {
    margin: -7px 0 -26px;
    display: flex;
    @media #{$ml} {
        margin: -5px 0 -20px;
    }
    @media #{$lg} {
        margin: -4px 0 -7px;
    }
    @media #{$xs} {
        margin: -2px 0 -7px;
    }
    .marquee__group {
        .m-item {
            margin-right: 25px;
            display: inline;
            a {
                font-size: 130px;
                font-weight: 400;
                letter-spacing: -0.03em;
                text-transform: uppercase;
                line-height: 1;
                @media #{$ml} {
                    font-size: 100px;
                }
                @media #{$lg} {
                    font-size: 80px;
                }
                @media #{$md} {
                    font-size: 65px;
                }
                @media #{$xs} {
                    font-size: 45px;
                }
                @media #{$vxs} {
                    font-size: 40px;
                }
                @media #{$sm} {
                    font-size: 50px;
                }
            }
            &.text-stroke {
                a {
                    -webkit-text-fill-color: transparent;
                    -webkit-text-stroke: 1px var(--tg-heading-color);
                    &:hover {
                        -webkit-text-stroke: 1px var(--tg-theme-primary);
                    }
                }
            }
        }
    }
}

.marquee-area-1 {
    &.marquee-wrap {
        .marquee__group {
            .m-item {
                margin-right: 80px;
                position: relative;
                display: inline-flex;
                align-items: center;
                gap: 80px;
                margin-bottom: 0;
                &:after {
                    content: '';
                    position: relative;
                    width: 20px;
                    height: 20px;
                    background: var(--tg-heading-color);
                    opacity: 0.2;
                    border-radius: 50%;
                }
                a {
                    font-size: 120px;
                    color: var(--tg-heading-color);
                    @media #{$ml} {
                        font-size: 100px;
                    }
                    @media #{$lg} {
                        font-size: 80px;
                    }
                    @media #{$md} {
                        font-size: 65px;
                    }
                    @media #{$xs} {
                        font-size: 45px;
                    }
                    @media #{$vxs} {
                        font-size: 40px;
                    }
                    @media #{$sm} {
                        font-size: 50px;
                    }
                }
                @media #{$lg} {
                    margin-right: 40px;
                    gap: 40px;
                }
            }
        }
    }
}

/*=============================
    Marquee 02
===============================*/
.marquee-area-2 {
    &.marquee-wrap {
        .marquee__group {
            .m-item {
                margin-right: 140px;
                a {
                    font-size: 120px;
                    color: transparent;
                    letter-spacing: normal;
                    -webkit-text-stroke: 2px rgba($color: #ffffff, $alpha: 0.2);
                    &:hover {
                        color: var(--tg-theme-primary);
                        -webkit-text-stroke: 2px var(--tg-theme-primary);
                    }
                    @media #{$ml} {
                        font-size: 100px;
                    }
                    @media #{$lg} {
                        font-size: 80px;
                    }
                    @media #{$md} {
                        font-size: 65px;
                    }
                    @media #{$xs} {
                        font-size: 45px;
                    }
                    @media #{$vxs} {
                        font-size: 40px;
                    }
                    @media #{$sm} {
                        font-size: 50px;
                    }
                }
                @media #{$lg} {
                    margin-right: 40px;
                }
            }
        }
    }
}

/*=============================
    Marquee 03
===============================*/
.marquee-area-3 {
    position: relative;
    &:after,
    &:before {
        content: '';
        position: absolute;
        width: 200px;
        left: 0;
        top: 0;
        bottom: 0;
        background: linear-gradient(to right, var(--tg-heading-color), transparent);
        background-size: cover;
        z-index: 1;
    }
    &:after {
        left: auto;
        right: 0;
        background: linear-gradient(to left, var(--tg-heading-color), transparent);
    }
    &.marquee-wrap {
        margin: 0;
        .marquee__group {
            .m-item {
                margin-right: 0px;
                display: inline-flex;
                align-items: center;
                margin-bottom: 0;
                a {
                    font-size: 120px;
                    margin-left: 50px;
                    color: transparent;
                    letter-spacing: normal;
                    -webkit-text-stroke: 2px rgba($color: #ffffff, $alpha: 0.2);
                    &:hover {
                        color: var(--tg-theme-primary);
                        -webkit-text-stroke: 2px var(--tg-theme-primary);
                    }
                    @media #{$ml} {
                        font-size: 100px;
                    }
                    @media #{$lg} {
                        font-size: 80px;
                    }
                    @media #{$md} {
                        font-size: 65px;
                    }
                    @media #{$xs} {
                        font-size: 45px;
                    }
                    @media #{$vxs} {
                        font-size: 40px;
                    }
                    @media #{$sm} {
                        font-size: 50px;
                    }
                }
                .skull-icon {
                    width: 110px;
                    height: 110px;
                    line-height: 110px;
                    border-radius: 50%;
                    text-align: center;
                    display: inline-block;
                    border: 1px solid var(--tg-theme-primary);
                    margin-left: 50px;
                }
                @media #{$lg} {
                    .skull-icon {
                        width: 80px;
                        height: 80px;
                        line-height: 80px;
                        img {
                            width: 40px;
                        }
                    }
                }
            }
        }
    }
    @media #{$xs} {
        &:after,
        &:before {
            display: none;
        }
    }
}