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

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

.#{$theme-prefix}-settings{
    &-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);
    }
    &-api{
        margin-bottom: 50px;
        &-input{
            max-width: 500px;
            margin-bottom: 20px;

            @media #{$xs}{
                max-width: 100%;
            }

            & label{
                margin-bottom: 6px;
            }
        }
        &-save{
            margin-bottom: 17px;
            &-btn{
                color: #FFF;
                text-align: center;
                border: none;
                font-size: 14px;
                font-weight: 600;
                line-height: 10px;
                letter-spacing: -0.28px;
                text-transform: uppercase;
                border-radius: 6px;
                padding: 18px 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 10px;
                @extend %ff-inter;
                background: linear-gradient(180deg, #6162F0 0%, #4F46E5 100%) !important;
                box-shadow: 0px 1px 2px 0px rgba(17, 24, 39, 0.20);
                @extend %transition;
                & svg{
                    margin-left: 5px;
                    display: none;
                }

                &:hover{
                    box-shadow: 0px 20px 30px 0px rgba(32, 37, 60, 0.1);
                }
            }
        }
    }
}