//@import "../../../abstracts/abstracts";

.modal-content,
.dbq-form {
    .file-upload {
        position: relative;
        overflow: hidden;
        margin: 0px;
        background-color: $modal-input-background;
        border-radius: 0 0 $border-radius-default $border-radius-default;
        input[type="file"] {
            position: absolute;
            z-index: 2;
            top: 0;
            right: 0;
            margin: 0;
            padding: 0;
            font-size: $font-size-large;
            cursor: pointer;
            width: 100%;
            opacity: 0;
            filter: alpha(opacity=0);
            height: 46px;
        }
        .btn-toolbar {
            float: left;
            width: 100%;
            margin-left: 0px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex-pack: start;
            justify-content: flex-start;
        }

        .file-upload-input,
        .file-upload-clear,
        .dbq-file-download-button {
            min-width: max-content;
            height: $field-height;
            padding: $field-upload-padding-y 15px;
        }
        &.file-upload-hover {
            padding: 8px 15px !important;
            input[type="text"] {
                background-color: $modal-input-background;
            }
            .file-upload-input {
                height: 46px !important;
                padding: 13px 15px !important;
                transition: none !important;
            }
            .file-upload-clear {
                height: 46px !important;
                padding: 13px 15px !important;
                transition: none !important;
            }
        }
    }

    .file-upload-hover {
        background-color: rgba(45, 121, 255, 0.1) !important;
        border: $field-border-width dashed $color-primary !important;
        border-radius: 0 0 $border-radius-default $border-radius-default !important;

        .image-file-upload-input {
            border: 0 !important;
            border-left: $field-border-width dashed $color-primary !important;
            .file-upload {
                input[type="file"] {
                    height: 46px !important;
                }
            }
            .image-file-upload {
                input[type="file"] {
                    height: 46px !important;
                }
            }
        }
        .file-upload-clear,
        .file-upload-input {
            border: 0 !important;
            border-left: $field-border-width dashed $color-primary !important;
        }

        input.form-control.image-file-upload-filename {
            height: 46px !important;
            padding: 0 !important;
            line-height: 46px !important;
        }

        &.image-file-upload {
            input[type="file"] {
                height: 46px;
            }
        }
    }

    .file-upload-clear {
        background: #bbb;
        font-size: $font-size-small;
        line-height: 20px;
        font-weight: 600;
        margin: 0 5px;
        z-index: 999;
        position: relative;
        color: #000000;
        background: 0;
        padding: 13px 10px;
        border-radius: 0 0 0 0;
        svg {
            fill: #ec564b;
            margin: -2px 5px 0 -5px !important;
        }
        span {
            color: #ffffff;
        }
        .file-upload-clear-title {
            color: #ec564b;
        }
        &:hover {
            background: #ec564b;
            border-color: #ec564b;
            border: $field-border-width solid #ec564b;
        }
        &:last-child {
            border-radius: 0 0 $border-radius-default 0 !important;
        }
    }

    .image-file-upload {
        position: relative;
        overflow: hidden;
        margin: 0px;
        border-color: $modal-border-color;
        width: 100%;
        height: $field-height;
        border-radius: 0 0 10px 10px;
        color: $color-primary;
        background-color: $modal-input-background !important;
        border: $field-border-width solid $modal-border-color;
        padding: 11px 10px 9px;
        .image-file-upload-filename {
            width: 100% !important;
            height: 40px !important;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 998;
            cursor: not-allowed !important;
        }
        .input-group-btn {
            width: auto !important;
            height: $field-height !important;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 999;
            background: $modal-input-background;
            border-radius: 0 10px 10px 0 !important;
            .btn {
                padding: $field-upload-button-padding-y 10px;
                transition: none;
                z-index: 999;
                border-radius: 0;
                &:not(.image-file-upload-clear) {
                    background: $modal-input-background;
                    border-color: $modal-input-background;
                }
            }
        }
        input[type="file"] {
            position: absolute;
            z-index: 2;
            top: 0;
            right: 0;
            margin: 0;
            padding: 0;
            font-size: $font-size-large;
            cursor: pointer;
            width: 100%;
            height: $field-height;
            opacity: 0;
            transition: none;
            filter: alpha(opacity=0);
        }
        &.file-upload-hover {
            padding: 8px 15px !important;
            input[type="text"] {
                background-color: $modal-input-background;
            }
            .image-file-upload-input,
            .image-file-upload-clear {
                height: 46px !important;
                padding: 13px 15px !important;
                transition: none !important;
            }
            .file-upload-clear {
                border: 0 !important;
                border-left: $field-border-width dashed $color-primary !important;
                border-radius: 0 0 7px 0 !important;
            }
        }
    }

    .image-file-upload-clear {
        color: $modal-input-background;
        background: $modal-input-background;
        font-weight: 600;
        line-height: 20px;
        font-size: $font-size-base;
        position: relative;
        border: 0;
        height: 50px;
        border-left: $field-border-width solid $modal-border-color;
        border-right: $field-border-width solid $modal-input-background;
        border-top: $field-border-width solid $modal-input-background;
        border-bottom: $field-border-width solid $modal-input-background;
        svg {
            fill: $color-primary;
        }
        &:enabled {
            span {
                color: #d5473c;
            }
            svg {
                fill: #d5473c;
            }
        }
        &:hover {
            background: #d5473c;
            border: $field-border-width solid #d5473c !important;
            span {
                color: #fff !important;
            }
            svg {
                fill: #fff !important;
            }
        }

    }

    .image-file-upload-filename,
    .file-upload-filename {
        float: left;
        margin-right: 0px !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: $border-radius-default !important;
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

    .image-file-upload-filename {
        width: calc(100% - 100px) !important;
        border: none !important;
        background: none !important;
        padding: 0;
    }

    .file-upload-filename {
        width: 100%;
    }

    .file-upload-title,
    .image-file-upload-title {
        margin-left: 2px;
    }

    .file-upload-input {
        border: $field-border-width solid $modal-border-color;
        color: color(text-color-default);
        background: 0;
        padding: 13px 10px;
        border-radius: 0 $border-radius-default $border-radius-default 0 !important;
        span {
            color: $color-primary;
        }
        &:hover {
            background: $color-primary !important;
            background-color: $color-primary !important;
            border-color: $color-primary !important;
            span {
                color: #ffffff !important;
            }
        }
    }

    .image-file-upload-input {
        border: $field-border-width solid;
        border-left-color: $modal-border-color !important;
        .image-file-upload-input-title-browse {
            color: $color-primary;
        }

        &:hover {
            background: $color-primary !important;
            background-color: $color-primary !important;
            border-color: $color-primary !important;
            span {
                color: #ffffff !important;
            }
        }
    }

    // FRENK: DANGER, SCROLL WITH CAUTION
    // EVERYTHING BELOW THIS POINT HAS NOT BEEN LOOKED AT, NOT SURE WHERE IT IS USED
    .dbq-has-download-button {
        .file-upload-input {
            border-radius: 0 !important;
        }
        .btn-primary.file-download-button {
            border-left: 0 !important;
            border-radius: 0 0 $border-radius-default 0 !important;
            &:hover {
                color: #ffffff !important;
                background: $color-primary !important;
                border: $field-border-width solid $color-primary !important;
                border-left: 0 !important;
            }
        }
    }
    .input-group {
        .form-control.image-file-upload-filename {
            padding: 11px 10px 9px;
            min-height: 0;
            height: auto !important;
        }
        .form-control.file-upload-filename { 
            border: $field-border-width solid $modal-border-color !important;
            border-radius: $border-radius-default 0 0 $border-radius-default;
            border-right: 0 !important;
        }
        button.file-upload-clear {
            line-height: 20px !important;
            font-weight: 600 !important;
            border-radius: 0;
            border-right: 0 !important;
            margin: 0 !important;
            font-size: $font-size-small !important;
        }
    }
    .dbq-has-image-preview {
        .image-file-upload {
            input.form-control.image-file-upload-filename {
                border-top: $field-border-width dashed $modal-border-color !important;
            }
        }
        .input-group-btn {
            button.image-file-upload-clear {
                border-top: $field-border-width dashed $modal-border-color !important;
                &:hover {
                    border-top: $field-border-width dashed #d5473c !important;
                }
            }
            div.image-file-upload-input {
                border-top: $field-border-width dashed $modal-border-color !important;
                &:hover {
                    border-top: $field-border-width dashed $color-primary !important;
                }
            }
        }
        .image-preview {
            border-radius: 0;
        }
    }
    .file-download-button {
        background: $modal-input-background !important;
        line-height: 20px;
        border: $field-border-width solid $modal-border-color !important;
        border-radius: 0 0 $border-radius-default $border-radius-default !important;
        color: $color-primary !important;
        fill: $color-primary !important;
        width: 100%;
        height: $field-height !important;
        padding: $field-download-button-padding-y 10px 9px !important;
        text-decoration: none;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        svg {
            fill: $color-primary;
            margin-right: 5px;
            padding: 0px;
        }
        &:hover {
            background: $color-primary !important;
            border: $field-border-width solid $color-primary !important;
            color: #ffffff !important;
            svg {
                fill: #ffffff !important;
            }
        }
    }
    .btn-primary.dbq-file-download-button-icon-only {
        padding: 8px 10px;
        svg {
            padding: 2px;
            margin-right: 0;
        }
    }
    .image-file-upload.file-upload-hover {
        .form-control {
            border: 0 !important;
        }
        .image-file-upload-input {
            border: 0 !important;
            border-left: $field-border-width dashed $color-primary !important;
            border-radius: 0 0 7px 0 !important;
        }
        .file-upload-input {
            border: 0 !important;
            border-left: $field-border-width dashed $color-primary !important;
            border-radius: 0 0 7px 0 !important;
        }
    }
    .input-group.file-upload-hover {
        .form-control.file-upload-filename {
            height: 46px !important;
            border: 0 !important;
        }
        button.file-upload-clear {
            height: 46px !important;
        }
    }
    .image-file-upload-filename {
        pointer-events: none !important;
        cursor: default !important;
    }
    .form-control.file-upload-filename {
        pointer-events: none !important;
        cursor: default !important;
        &:focus {
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }
    }
    input.form-control.image-file-upload-filename {
        height: 50px !important;
        border-radius: 0 0 $border-radius-default $border-radius-default;
    }

    .image-file-upload.file-upload-hover {
        button.btn-default.file-upload-clear {
            border: 0 !important;
            border-left: $field-border-width dashed $color-primary !important;
            border-radius: 0 0 7px 0 !important;
        }
    }
    .file-upload.file-upload-hover {
        button.btn-default.file-upload-clear {
            border: 0 !important;
            border-left: $field-border-width dashed $color-primary !important;
            border-radius: 0 0 7px 0 !important;
        }
    }
}

.dbq-no-image-found-text {
	background: $modal-disabled-color !important;
	border: $field-border-width solid $modal-disabled-color;
	color: $modal-input-color;
    float: left;
    width: 100%;
    border-radius: 0 0 $border-radius-default $border-radius-default;
    padding: $field-upload-padding-y 10px;
    font-weight: $field-font-weight;
    font-size: $field-font-size;
    line-height: 20px;
}

.image-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 80px;
	background: $modal-input-background !important;
	border: $field-border-width dashed $modal-border-color !important;

    a {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    cursor: pointer;
	img {
		opacity: 1;
        max-height: 168px; // 4 fields heigh
        margin: 10px auto;
        display: block;
        backface-visibility: hidden;
	}
	&:hover {
		img {
			opacity: 0.3;
		}
		.image-hover {
			opacity: 1;
		}
		background: rgba(221, 226, 232, 0.70);
	}
	.image-hover {
		opacity: 0;
		fill: $color-primary;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
	}
}

.image360-preview {
	height: 250px;
    width: 100%;
	border: 3px dashed $modal-border-color;
	border-radius: 0 0 $border-radius-default $border-radius-default !important;
	margin-bottom: 10px;
	a {
		position: relative;
		width: 100%;
		height: 100%;
		float: left;
	}
	img {
		max-height: 200px;
		margin: 10px auto;
		opacity: 1;
		display: block;
		transition: 0.5s ease;
		backface-visibility: hidden;
	}
	&:hover {
		img {
			opacity: 0.3;
		}
		.image-hover {
			opacity: 1;
		}
	}
	.image-hover {
		width: 40px;
		height: 40px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transition: 0.5s ease;
		opacity: 0;
	}
}

div.dbq-label-disabled {
	+ {
		div.image-preview {
			border: $field-border-width dashed $modal-border-color !important;
		}
	}
}
form[data-view-mode="View"] {
	.image-preview {
		border: $field-border-width dashed $modal-border-color !important;
	}
}


::-webkit-file-upload-button {
    cursor: pointer;
}

#document-topics {
    .topic {
        .file-upload-input {
            border-radius: 0 0 0 0;
            &:last-child {
                border-radius: 0 0 $border-radius-default 0 !important;
            }
        }
    }
}