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

/*----------------------------------------*/
/*  Widget
/*----------------------------------------*/

.#{$theme-prefix}-widget{
    &-header-title{
        @extend %ff-inter;
        font-size: 18px;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 15px;
        margin-top: 0;
    }
    &-card{
        padding: 14px 16px;
        border: 1px solid #EAEAEA;
        border-radius: 8px;
        cursor: pointer;
        @extend %transition;
        &:hover{
            border-color: var(--magicai-theme-primary);
        }

        &:not(:last-child){
            margin-bottom: 10px;
        }
    }
    &-title{
        @extend %ff-inter;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 6px;
    }
    &-content{
        & p{
            @extend %ff-roboto;
            color: #606060;
            font-size: 13px;
            line-height: 18px;
        }
    }
    &-icon{
        margin-right: 14px;
        flex: 0 0 auto;

        & span{
            display: inline-block;
            margin-top: 3px;
        }
    }
}



.#{$theme-prefix}-widget{
    $widget: &;
    &-wrapper{
        padding: 30px 35px;
        border-radius: 12px;
        background: #FFF;
        box-shadow: 0px 1.6px 3.5px 0px rgba($color: #081335, $alpha: .1), 0px 0.3px 0.8px 0px rgba($color: #081335, $alpha: .1);
    }
    &-sec-title{
        color: #222;
        font-size: 30px;
        font-weight: 700;
        line-height: 1;
        @extend %ff-inter;
        margin-bottom: 45px;
    }
    &-card-2{
        position: relative;
        border-radius: 8px;
        @include gradient((18deg, #5B21B6 0%, #7E22CE 31.96%, #DB2777 64.11%, #FACC15 91.85%));
        z-index: 1;
        padding: 22px 22px;
        @extend %transition;
        margin-bottom: 20px;
        &:hover{
            box-shadow: 0px 20px 30px 0px rgba(32, 37, 60, 0.10);

            #{$widget}-card-layer-2{
                background-color: rgba($color: #fff, $alpha: 1);
            }
        }


    }
    &-card-left{
        padding-right: 65px;

        @media #{$xs}{
            padding-right: 30px;
        }
    }
    &-card-layer-2{
        position: absolute;
        top: 1px;
        left: 1px;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        background-color: rgba($color: #fff, $alpha: .98);
        border-radius: 7px;
        z-index: -1;
    }
    &-title-2{
        @extend %ff-inter;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 9px;
        line-height: 1;
    }
    &-content-2{
        & p{
            @extend %ff-inter;
            color: #65676B;
            font-size: 13px;
            line-height: 18px;
        }
    }
    &-icon-2{
        margin-right: 18px;
        flex: 0 0 auto;
        @media #{$xs}{
            margin-bottom: 20px;
            margin-right: 0;
        }
        & span{
            display: inline-block;
            margin-top: 3px;
        }
    }
}