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

/* WooCommerce Css Start */

.#{$theme-prefix}-controls{
    &-top{
        border-radius: 6px;
        padding: 30px;
        margin-bottom: 54px;

        @media #{$xs}{
           padding: 20px;
        }
    }
    &-title{
        font-size: 20px;
        line-height: 1;
        margin-bottom: 3px;
    }
    &-content{
        @media #{$md, $sm, $xs}{
            margin-bottom: 30px;
        }
        & p{
            font-size: 14px;
            margin-bottom: 0;
        }
    }
    &-setting{
        @media #{$lg}{
            margin-left: -20px;
        }

        & .#{$theme-prefix}-toggle-switch{
            @media #{$sm, $xs}{
                margin-bottom: 30px;
            }
        }
    }
    &-save{
        margin-left: 80px;
        @media #{$lg}{
            margin-left: 20px;
        }
        @media #{$sm, $xs}{
            margin-left: 0;
        }
        a{
            color: #fff;
            :focus{
                color: #fff;
            }
        }
    }
}

.media-upload-control{
    margin-bottom: 10px;
    width: 245px;
    .media-preview{
        position: relative;
        width: 100%;
        border: 1px dashed #ccced8;
        margin-bottom: 10px;
        overflow: hidden;
        span{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 13px;
            color: #A3A6B4;
        }
        img{
            max-width: 100%;
            height: auto;
            display: block;
        }
        &.no-border{
            border: 0;
        }
    }
}