$icms-image_single-size: 80px !default;
$icms-camera-icon: url("data:image/svg+xml,<svg width='32' height='26' viewBox='0 0 32 26' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M30.9354 4.33069C30.2966 3.66149 29.4145 3.26605 28.4106 3.26605H23.3612V3.20522C23.3612 2.44476 23.057 1.71472 22.5399 1.22803C22.0228 0.710921 21.3232 0.406738 20.5627 0.406738H11.4373C10.6464 0.406738 9.94677 0.710921 9.42966 1.22803C8.91255 1.74514 8.60837 2.44476 8.60837 3.20522V3.26605H3.58935C2.58555 3.26605 1.70342 3.66149 1.06464 4.33069C0.425856 4.96948 0 5.88202 0 6.85541V22.0037C0 23.0075 0.395437 23.8896 1.06464 24.5284C1.70342 25.1672 2.61597 25.5931 3.58935 25.5931H28.4106C29.4145 25.5931 30.2966 25.1976 30.9354 24.5284C31.5741 23.8896 32 22.9771 32 22.0037V6.85541C32 5.85161 31.6046 4.96948 30.9354 4.33069ZM30.4183 22.0037H30.3878C30.3878 22.5512 30.1749 23.0379 29.8099 23.4029C29.4449 23.768 28.9582 23.9809 28.4106 23.9809H3.58935C3.04183 23.9809 2.55513 23.768 2.19011 23.4029C1.8251 23.0379 1.61217 22.5512 1.61217 22.0037V6.85541C1.61217 6.30788 1.8251 5.82119 2.19011 5.45617C2.55513 5.09115 3.04183 4.87822 3.58935 4.87822H9.46008C9.91635 4.87822 10.2814 4.5132 10.2814 4.05693V3.1748C10.2814 2.8402 10.403 2.53602 10.616 2.32309C10.8289 2.11016 11.1331 1.98849 11.4677 1.98849H20.5627C20.8973 1.98849 21.2015 2.11016 21.4144 2.32309C21.6274 2.53602 21.7491 2.8402 21.7491 3.1748V4.05693C21.7491 4.5132 22.1141 4.87822 22.5703 4.87822H28.4411C28.9886 4.87822 29.4753 5.09115 29.8403 5.45617C30.2053 5.82119 30.4183 6.30788 30.4183 6.85541V22.0037Z' fill='#FFF'/><path d='M15.9985 6.94678C13.9301 6.94678 12.0441 7.79849 10.7057 9.1369C9.33692 10.5057 8.51562 12.3612 8.51562 14.4297C8.51562 16.4981 9.36734 18.3841 10.7057 19.7225C12.0746 21.0913 13.9301 21.9126 15.9985 21.9126C18.067 21.9126 19.9529 21.0609 21.2913 19.7225C22.6601 18.3536 23.4814 16.4981 23.4814 14.4297C23.4814 12.3612 22.6297 10.4753 21.2913 9.1369C19.9529 7.79849 18.067 6.94678 15.9985 6.94678ZM20.1354 18.597C19.0708 19.6312 17.6107 20.3004 15.9985 20.3004C14.3864 20.3004 12.9263 19.6312 11.8616 18.597C10.797 17.5323 10.1582 16.0723 10.1582 14.4601C10.1582 12.8479 10.8274 11.3878 11.8616 10.3232C12.9263 9.25857 14.3864 8.61978 15.9985 8.61978C17.6107 8.61978 19.0708 9.28899 20.1354 10.3232C21.2 11.3878 21.8388 12.8479 21.8388 14.4601C21.8692 16.0723 21.2 17.5323 20.1354 18.597Z' fill='#FFF'/><path d='M26.8303 9.89701C27.6535 9.89701 28.3208 9.22969 28.3208 8.40651C28.3208 7.58333 27.6535 6.91602 26.8303 6.91602C26.0072 6.91602 25.3398 7.58333 25.3398 8.40651C25.3398 9.22969 26.0072 9.89701 26.8303 9.89701Z' fill='#FFF'/></svg>");
.qq-upload-list {
    display: none;
}
.widget_image_multi, .widget_image_single {
    .qq-upload-button {
        background-image: escape-svg($icms-camera-icon);
        background-repeat: no-repeat;
        > input {
            width: 100%;
            height: 100%;
            font-size: 0 !important;
        }
    }
}
.widget_image_multi {
    .qq-upload-button {
        display: inline-block;
        font-family: $btn-font-family;
        font-weight: $btn-font-weight;
        text-align: center;
        white-space: $btn-white-space;
        vertical-align: middle;
        cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
        user-select: none;
        @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
        @include transition($btn-transition);
        @include button-variant($secondary, $secondary);
        &:focus,
        &.focus {
          outline: 0;
          box-shadow: $btn-focus-box-shadow;
        }
    }
    .qq-upload-button {
        background-size: 26px;
        background-position: $btn-padding-x center;
        padding-left: calc(#{$btn-padding-x*2} + 26px);
    }
    .qq-uploader {
        position: relative;
    }
    .qq-upload-drop-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1;
        font-size: 12px;
        line-height: 1;
        height: 100%;
        text-align: center;
        padding: $btn-padding-y;
        border-radius: $btn-border-radius;
        background-color: darken($secondary, 10%);
        color: $white;
        &.qq-upload-drop-area-active {
            background-color: $warning;
        }
    }
    .preview {
        margin: 0 ($spacer) ($spacer) 0;
    }
    &.widget_image_multi_styled .qq-upload-list {
        display: block;
        margin: $spacer 0 0;
        padding: 0;
        list-style: none;
        &:empty {
            display: none;
        }
        > li {
            color: $text-muted;
            display: flex;
            align-items: center;
            margin-bottom: $spacer*0.5;
            &:last-child {
                margin-bottom: 0;
            }
            > * {
                margin-right: $spacer*0.5;
                &:last-child {
                    margin-right: 0;
                }
                &.qq-upload-spinner {
                    position: relative;
                    display: block;
                    width: $font-size-base*1.25;
                    height: $font-size-base*1.25;
                }
                &.qq-upload-cancel {
                    color: $danger;
                }
            }
            .qq-upload-failed-text {
                display: none;
            }
        }
    }
}
.widget_image_single {
    .qq-upload-button, .qq-upload-drop-area {
        position: absolute !important;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: 50%;
    }
    .qq-upload-button {
        text-indent: -999px;
        background-size: 32px 26px;
        background-position: center center;
    }
    .qq-upload-drop-area {
        text-align: center;
        align-items: center;
        background-color: darken($secondary, 10%);
        z-index: 1;
        font-size: $font-size-base * .6;
        &.qq-upload-drop-area-active {
            background-color: $warning;
        }
    }
}
.widget_image_single, .widget_image_multi {
    .loading, .qq-upload-spinner {
        a {
            display: none;
        }
        &:after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: 50%;
            display: block;
            border: 4px solid;
            border-top-color: transparent;
            border-left-color: transparent;
            color: $primary;
            background-color: transparent;
            -webkit-animation: loader-upload 0.9s linear infinite;
            animation: loader-upload 0.9s linear infinite;
            z-index: 99;
        }
    }
    .block, .multi-block {
        background-position: center center;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        width: $icms-image_single-size;
        height: $icms-image_single-size;
        flex-shrink: 0;
        position: relative;
        text-align: center;
        font-size: $font-size-base * .75;
        @include transition($btn-transition);
        @include button-variant($secondary, $secondary);
        a {
            position: absolute;
            right: 0;
            width: auto;
            z-index: 1;
            bottom: 0;
        }
    }
    .preview {
        > div {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            border-radius: 50%;
            overflow: hidden;
        }
        img {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 100%;
            height: auto;
        }
    }
}
.form-group.ft_image {
    padding-left: $icms-image_single-size + 10;
    position: relative;
    min-height: $icms-image_single-size;
    display: flex;
    align-items: center;
    flex-direction: column;
    > label {
        width: 100%;
        margin-top: auto;
        margin-bottom: auto;
    }
    .icms-forms-hint {
        width: 100%;
        margin-bottom: auto;
        margin-top: -20px;
    }
    .widget_image_single + .hint {
        margin: 0 !important;
    }
    .widget_image_single {
        position: absolute;
        left: 0;
        top: 0;
        overflow: visible;
    }
}
@-webkit-keyframes loader-upload{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes loader-upload{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}