@import "dropzone/dist/dropzone";

.dropzone {
    border: 2px dashed #d2d6de;
    min-height: 232px;
    margin-bottom: 25px;
    overflow: hidden;

    &.dz-clickable {
        border-radius: 8px;
    }

    .dz-message {
        color: #646c7f;
        font-size: 20px;
        margin-top: 82px;
    }

    .dz-preview .dz-progress .dz-upload {
        background: #0068e1;
    }
}

.file-icon {
    font-size: 20px;
}

.main-file {
    width: 100%;
}

.file-thumbnail {
    float: left;
    margin-right: 10px;

    > .thumbnail-name {
        text-align: center;
    }
}

.media-picker-divider {
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 20px;
}

.single-image-wrapper {
    padding-bottom: 20px;

    h4 {
        font-weight: 500;
        margin-bottom: 10px;
    }
}

.single-image {
    padding: 10px;
    background: #f1f1f1;
    margin-top: 15px;
    display: inline-block;
    border-radius: 8px;
    vertical-align: bottom;
}

.image-holder {
    position: relative;
    float: left;
    height: 125px;
    width: 125px;
    overflow: hidden;
    background: #fff;
    margin: 0;
    border: 1px solid #d2d6de;
    border-radius: 8px;
    z-index: 0;
    cursor: pointer;

    .placeholder-image {
        max-width: 80%;
    }

    > i {
        position: absolute;
        font-size: 60px;
        color: #d9d9d9;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }

    > img {
        position: absolute;
        left: 50%;
        top: 50%;
        max-height: 100%;
        max-width: 100%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    > .remove-image {
        position: absolute;
        top: 4px;
        right: 4px;
        display: inline-flex;
        color: #ffffff;
        padding: 0;
        background: transparent;
        transition: 150ms;
        font-size: 18px;
        font-family: "FontAwesome";
        -webkit-text-stroke: 1px #737881;
        -moz-text-stroke: 1px #737881;
        -ms-text-stroke: 1px #737881;
        -o-text-stroke: 1px #737881;
        z-index: 2;

        &:focus {
            border-color: transparent;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        &:active {
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        svg {
            width: 18px;
            height: 18px;
            transition: 150ms ease-in-out;

            path {
                stroke: #b5b9c1;
                transition: 150ms ease-in-out;
            }
        }

        &:hover {
            svg {
                path {
                    stroke: #666666;
                }
            }
        }
    }
}

.blog-featured-image {
    .remove-image {
        right: 7px;
        top: 7px;

        &::after {
            content: unset;
        }

        > svg {
            width: 22px;
            height: 22px;

            path {
                stroke: #b5b9c1;
            }
        }
    }
}

.image-picker > i {
    color: #737881;
}