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

/* Offcanvas Css Start */

.#{$theme-prefix}-style{
    &-inner{
        background: #FFFFFF;
        box-shadow: 0px 2px 2px #E0E2EA;
        border-radius: 6px;
        padding: 40px 30px;
        margin-bottom: 50px;

        @media #{$xs}{
            padding: 20px;
        }
    }
    &-option{
        &-item{
            padding: 25px 0 23px;
            border-bottom: 1px solid rgba($color: #0D0432, $alpha: .1);
            &:last-child{
                border-bottom: 0;
                margin-bottom: 8px;
            }
        }
        &-content{
            @media #{$md, $sm, $xs}{
                margin-bottom: 15px;
            }
            & p{
                font-size: 14px;
                color: #5A5A64;
                margin-bottom: 0;
            }
        }
        &-title{
            font-size: 15px;
            margin-bottom: 2px;
            &.font-semibold{
                font-weight: 600;
            }
        }
    }
    &-select{
        width: 270px;
        @media #{$xs}{
            width: 100%;
        }
    }
    &-input{
        width: 270px;
        @media #{$xs}{
            width: 100%;
        }
        & input{
            outline: 0;
            width: 100%;
            height: 42px;
            border-radius: 4px;
            border: 1px solid rgba($color: #0D0432, $alpha: .12);
            padding: 0 20px;
            @extend %transition;
            &:focus{
                border-color: var(--strb-theme-primary);
            }
        }
    }
    &-section{
        &-title{
            padding: 18px 25px;
            background-color: rgba($color: #0AB06B, $alpha: .08);
            border-radius: 6px;
            & h3{
                font-size: 17px;
            }
        }
    }
    &-color{
        $color : &;
        width: 342px;

        @media #{$sm, $xs}{
            width: 100%;
            flex-wrap: wrap;
        }
        
        & > div{
            &:not(:last-child){
                margin-right: 6px;
            }
        }
        &-select{
            line-height: 1;
            @media #{$xs}{
                margin-bottom: 10px;
             }
            &.heading-color{
                #{$color}-select{
                    &-palate{
                        background-color: #DCD7EF;
                    }
                }
            }
            & label{
                display: inline-block;
                width: 150px;
                height: 40px;
                line-height: 36px;
                border-radius: 4px;
                border: 1px solid rgba($color: #0D0432, $alpha: .12);
                position: relative;

                &:hover{
                    cursor: pointer;
                }
            }
            & input{
                display: none;
                @extend %transition;
            }

            &-text{
                font-size: 13px;
                color: #595760;
                position: absolute;
                top: 46%;
                right: 16px;
                line-height: 1;
                @include transform(translateY(-50%));
            }
            &-palate{
                display: inline-block;
                width: 46px;
                height: 38px;
                border-radius: 3px;
                background-color: var(--strb-theme-primary);
            }
        }
        &-input{
            @media #{$xs}{
               margin-bottom: 10px;
            }
            & input{
                width: 100px;
                height: 40px;
                outline: 0;
                border: 1px solid rgba($color: #0D0432, $alpha: .12);
                color: #0D0432;
                padding: 0 11px;
                border-radius: 4px;
                @extend %transition;
                &:focus{
                    border-color: var(--strb-common-black);
                }
            }
        }
        &-btn{
            @media #{$xs}{
                margin-bottom: 10px;
             }
            & button{
                height: 40px;
                line-height: 38px;
                font-size: 13px;
                font-weight: 500;
                color: var(--strb-theme-primary);
                padding:0 24px;
                border: 1px solid var(--strb-theme-primary);
                border-radius: 4px;
                background-color: rgba($color: #5E2EFF, $alpha: .06);
                @extend %transition;
                &:hover{
                    background-color: var(--strb-theme-primary);
                    border-color: var(--strb-theme-primary);
                    color: var(--strb-common-white);
                }
            }
        }
    }
    &-help{
        text-align: center;
        & img{
            max-width: 100%;
            margin-top: 60px;
            margin-bottom: 15px;
        }
    }
}