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

/* Widget Css Start */

.#{$theme-prefix}-widget{
    &-container{
        margin-bottom: 20px;
    }
    &-row{
        margin-bottom: 20px;
    }
    &-title{
        font-size: 16px;
        margin-bottom: 20px;
    }
    &-setting{
        $setting : &;
        &-item{
            background: #FFFFFF;
            box-shadow: 0px 2px 2px #E0E2EA;
            border-radius: 6px;
            padding: 20px 24px;
            position: relative;
            margin-bottom: 30px;
            &:hover{
                z-index: 1;
                box-shadow: 0px 0px 2px #1b48ff;
                cursor: pointer;
            }
            &-2{
                #{$setting}{
                    &-title{
                        padding-right: 10px;
                    }
                }
            }
        }
        &-title{
            font-size: 14px;
            margin-bottom: 0;
            position: relative;
            padding-right: 46px;
            display: inline-block;
            & span{
                position: absolute;
                top: 0;
                right: 0;
                font-size: 11px;
                font-weight: 800;
                color: var(--strb-common-white);
                @include gradient((1.4deg, #990049 -25.89%, #FF1875 104.27%));
                box-shadow: 0px 2px 3px rgba(153, 0, 73, 0.3);
                border-radius: 4px;
                padding: 4px 6px 3px;
                line-height: 1;
                text-transform: uppercase;
            }
        }
        &-content{
            width: 80%;

            @media #{$lg}{
                width: 75%;
            }

            @media #{$xs}{
                margin-bottom: 20px;
            }
        }
        &-action{
            line-height: 1;
        }
        &-switch{
            line-height: 1;
            display: inline-block;

            &:hover{
                cursor: pointer;
            }
            & span{
                display: inline-block;
                width: 46px;
                height: 24px;
                background: #CAD2EF;
                border-radius: 20px;
                position: relative;
                @extend %transition;
                &::after{
                    display: inline-block;
                    position: absolute;
                    content: '';
                    top: 3px;
                    left: 3px;
                    bottom: 3px;
                    right: 54%;
                    border-radius: 50%;
                    box-shadow: 1px 2px 3px rgba(18, 20, 32, 0.3);
                    @include gradient((180deg, #FFFFFF 0%, #D6DCEF 100%));
                    transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
                    transition-property: all;
                    transition-delay: 0s;
                    transition-property: left, right;
                    transition-delay: 0s, .08s;
                }
            }
            & input{
                display: none;

                &:checked{
                    & ~ span{
                        background-color: var(--strb-theme-primary);
                        &::after{
                            left: 54%;
                            right: 3px;
                            transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
                            transition-property: all;
                            transition-delay: 0s;
                            transition-property: left, right;
                            transition-delay: .08s, 0s;
                        }
                    }
                }
            }
        }
        &-badge{
            position: absolute;
            top: 0;
            left: 0;
            clip-path: polygon(0 0, 0% 100%, 100% 0);
            @include gradient((132.56deg, #FF0066 3.65%, #990049 72.89%));
            width: 34px;
            height: 34px;
            line-height: 34px;
            border-top-left-radius: 6px;
            & span{
                display: inline-block;
                line-height: 1;
                font-size: 10px;
                text-transform: uppercase;
                color: var(--strb-common-white);
                font-weight: 800;
                @extend %ff-poppins;
                
                text-align: center;
                @include transform(rotate(-45deg) translate(5px, -5px));
            }
        }
        &-offcanvas{
            & button{
                color: #6F6F90;
                background: transparent;
                outline: 0;
                border: 0;
                @extend %transition;
                &:hover{
                    color: var(--strb-common-black);
                }
            }
        }
    }
    &-option{
        &-save{
            padding-top: 30px;
            border-top: 1px dashed #C0C8E5;
        }
    }
    &-tooltip{
        $tool : &;
        &-wrapper{
            position: relative;
            & span{
                color: var(--strb-common-black);
                display: inline-block;
                @extend %transition;
                & svg{
                    @include transform(translateY(2px));
                }
            }
            &:hover{
                cursor: pointer;
                & span{
                    color: var(--strb-common-black);
                }
                #{$tool}{
                   
                    &-content{
                        visibility: visible;
                        opacity: 1;
                    }
                }
            }
        }
        &-content{
            position: absolute;
            bottom: calc(100% + 10px);
            left: -29px;
            min-width: 286px;
            background-color: var(--strb-common-white);
            padding: 13px 20px 15px;
            border-radius: 14px;
            box-shadow: 0px 10px 30px rgba(4, 11, 17, 0.14);
            visibility: hidden;
            opacity: 0;
            @extend %transition;

            @media #{$md, $sm}{
                left: auto;
                right: -115px;
            }

            @media #{$xs}{
                left: auto;
                right: -126px;
            }

            &::after {
                position: absolute;
                content: "";
                left: 35px;
                bottom: 0;
                width: 18px;
                height: 18px;
                background-color: var(--strb-common-white);
                @include transform(rotate(45deg) translateY(50%));

                @media #{$md, $sm, $xs}{
                    left: auto;
                    right: 38%;
                }
                @media #{$xs}{
                    left: auto;
                    right: 41%;
                }
            }
            & p{
                font-size: 13px;
                margin-bottom: 0;
            }
        }
    }
}