@use '../utils/' as *;

/* Tutorial Css Start */

.#{$theme-prefix}-tutorial{
    &-section-title{
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 3px;
        @extend %ff-inter;
        &-wrapper{
            & p{
                @extend %ff-inter;
                color: #777778;
                font-size: 16px;
            }
        }
        &-icon{
            display: inline-block;
            margin-bottom: 15px;
        }
    }

    &-item{
        margin-bottom: 40px;
    }

    &-thumb{
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        margin-bottom: 22px;
        line-height: .8;
        & > img{
            border-radius: 10px;
            width: 100%;
        }

        &::after{
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            @include gradient((180deg, rgba(62, 17, 213, 0.2) 0%, rgba(62, 17, 212, 0.7) 100%));
        }
    }

    &-play{
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        @include transform(translate(-50%, -50%));
        &-btn{
            display: inline-block;
            width: 52px;
            height: 52px;
            line-height: 52px;
            border-radius: 50%;
            background-color: var(--magicai-common-white);
            color: var(--magicai-theme-primary);
            text-align: center;
            position: relative;
            z-index: 1;

            & img{
                @include transform(translate(1px , 3px));
            }

            &::after{
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: var(--magicai-common-white);
                z-index: -1;
                @include transition(all, .2s);
            }

            &:hover{
                &::after{
                    @include transform(scale(1.1));
                }
            }
        }
    }

    &-title{
        font-size: 18px;
        font-weight: 500;
        color: var(--magicai-heading-primary);
        @extend %ff-inter;
    }

    &-more{
        text-align: right;

        @media #{$sm, $xs}{
            text-align: left;
        }
    }
}