.image-container {
    position: relative;
    border-radius: 4px;
    max-width: 250px;
    min-width: 160px;
    width: 100%;
    background-color: #ccc;
    border: 1px solid #acbac4;

    &.tiny {
        max-width: 160px;
    }

    &.image-set {
        .ui.small.image:after {
            content: '\f127';
            color: softlight(@red, #000);
        }
    }

    &.highlight {
        border-color: #2185d0;
        box-shadow: 0 0 5px 1px #2185d04d;
    }

    &:after {
        display: block;
        content: '';
        padding-bottom: 72.5%;
    }

    .ui.small.image {
        position: absolute;
        border-radius: 4px;
        width: 100%;
        height: 100%;
        object-fit: cover;

        &:after {
            content: '\f03e';
            font-family: 'Icons';
            display: block;
            font-size: 50px;
            color: #fff;
            position: absolute;
            top: 32%;
            line-height: 1;
            width: 100%;
            text-align: center;
        }
    }

    .overlay-menu {
        opacity: 0;
        border-radius: 4px;
        transition: opacity 0.15s ease-in-out;
        z-index: 5;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.75);
        &:hover {
            opacity: 1;
        }
        &.uneditable:hover {
            opacity: 0;
        }
        & > div:first-child {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 90%;
            margin-left: 5%;
            .button {
                &.red-text {
                    color: #ff0000 !important;
                    &:hover { color: darken(#ff0000, 7%) !important; }
                }
                background: #fff none !important;
                padding: 0.65em 1.5em;
                &:not(:last-of-type) {
                    border-bottom: solid 1px #eee;
                }
            }
        }
    }
}
