/*! Image Uploader - v1.2.3 - 26/11/2019
 * Copyright (c) 2019 Christian Bayer; Licensed MIT */

/* Icons Font Face*/
@font-face {
    font-family: 'Image Uploader Icons';
    src: url('fonts/iu.eot');
    src: url('fonts/iu.eot') format('embedded-opentype'),
    url('fonts/iu.ttf') format('truetype'),
    url('fonts/iu.woff') format('woff'),
    url('fonts/iu.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Icons class */
[class^="iui-"], [class*="iui-"] {
    font-family: 'Image Uploader Icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Icon Close */
.iui-close:before {
    content: "\e900";
}

/* Icon Cloud Upload */
.iui-cloud-upload:before {
    content: "\e901";
}

/* Base style */
.image-uploader {
    min-height: 0;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    background: #fff;
    position: relative;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    overflow: hidden;
}

.image-uploader:hover {
    border-color: #98a6ad;
    background: #f4f7fb;
}

.image-uploader:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.image-uploader.has-files {
    min-height: 0;
    background: #fff;
}

.image-uploader.readonly-mode {
    background: #f8fafc;
    border-style: solid;
}

/* Style on hover */
.image-uploader.drag-over {
    background-color: #eff6ff;
    border-color: #3b82f6;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .18);
}

/* Hide the file input */
.image-uploader input[type="file"] {
    width: .1px;
    height: .1px;
    position: absolute;
    z-index: -1;
    opacity: 0;
}

/* Text container */
.image-uploader .upload-text {
    position: relative;
    order: 9999;
    min-height: 118px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: .45rem;
    padding: .75rem;
    border: 1px dashed #b6c2d1;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
    cursor: pointer;
    line-height: 1.25;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.image-uploader .upload-text:hover,
.image-uploader .upload-text:focus {
    outline: none;
    border-color: #3b82f6;
    background: #eff6ff;
    color: #2563eb;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
}

.image-uploader .upload-text i {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0f78b5;
    font-size: 1.45rem;
}

.image-uploader .upload-text span {
    display: block;
    max-width: 7rem;
    font-size: .84rem;
    line-height: 1.35;
    font-weight: 600;
}

.image-uploader:hover .upload-text i,
.image-uploader.drag-over .upload-text i {
    background: #dbeafe;
    color: #2563eb;
}

/* Uploaded images container */
.image-uploader .uploaded {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: .75rem;
    padding: .75rem;
    line-height: 0;
}

.image-uploader .uploaded .uploaded-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    position: relative;
    cursor: default;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    background: #f1f5f9;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.image-uploader .uploaded .uploaded-image:hover {
    border-color: #94a3b8;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
    transform: translateY(-1px);
}

.image-uploader .uploaded .uploaded-image img {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
  }

/* Delete image button */
.image-uploader .uploaded .uploaded-image .delete-image {
    display: grid;
    place-items: center;
    cursor: pointer;
    position: absolute;
    top: .45rem;
    right: .45rem;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
    background-color: rgba(15, 23, 42, .72);
    -webkit-appearance: none;
    border: none;
    opacity: 0;
    transform: scale(.94);
    transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
    z-index: 3;
}

.image-uploader .uploaded .uploaded-image .delete-image i {
    display: block;
    color: #fff;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    line-height: 1rem;
}

.image-uploader .uploaded .uploaded-image:hover .delete-image {
    opacity: 1;
    transform: scale(1);
}

.image-uploader .uploaded .uploaded-image .delete-image:hover {
    background-color: #dc2626;
}

@media screen and (max-width: 1366px) {
    .image-uploader .uploaded .uploaded-image {
        width: 100%;
        padding-bottom: 0;
    }
}

@media screen and (max-width: 992px) {
    .image-uploader .uploaded {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        gap: .6rem;
        padding: .6rem;
    }
}

@media screen and (max-width: 786px) {
    .image-uploader .uploaded {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
}

@media screen and (max-width: 450px) {
    .image-uploader .uploaded {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        padding: .5rem;
    }
}
/* drag-to-reorder */
.image-uploader .uploaded .uploaded-image[draggable="true"] { cursor: grab; }
.image-uploader .uploaded .uploaded-image[draggable="true"]:active { cursor: grabbing; }
.image-uploader .uploaded .uploaded-image.sorting { opacity: .55; border: 1px dashed #64748b; box-shadow: none; }
.image-uploader .uploaded .uploaded-image.sort-over { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

.image-uploader .uploaded .uploaded-image .drag-handle {
    display: grid;
    place-items: center;
    position: absolute;
    bottom: .45rem;
    left: .45rem;
    width: 1.85rem;
    height: 1.85rem;
    color: #fff;
    background: rgba(15, 23, 42, .72);
    border-radius: 999px;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
    cursor: grab;
    z-index: 2;
    user-select: none;
    opacity: 0;
    transform: scale(.94);
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.image-uploader .uploaded .uploaded-image:hover .drag-handle {
    opacity: 1;
    transform: scale(1);
}
.image-uploader .uploaded .uploaded-image .drag-handle:hover {
    background: #2563eb;
}