.ws-image-viewer {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #111;

    user-select: none;
}


.ws-image-viewer__image {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    transform-origin: center center;

    transition:
        opacity .15s ease,
        transform .25s ease;

    user-select: none;
    -webkit-user-drag: none;

    cursor: zoom-in;
}


.ws-image-viewer__image.is-zoomed {
    cursor: grab;
}


.ws-image-viewer__image.is-dragging {
    cursor: grabbing;
}


.ws-image-viewer__prev,
.ws-image-viewer__next {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 56px;
    height: 56px;

    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, .55);

    color: #fff;

    font-size: 28px;

    cursor: pointer;

    z-index: 2;
}


.ws-image-viewer__prev {
    left: 20px;
}


.ws-image-viewer__next {
    right: 20px;
}


.ws-image-viewer__counter {
    position: absolute;

    bottom: 20px;
    left: 50%;

    transform: translateX(-50%);

    background: rgba(0, 0, 0, .6);

    color: #fff;

    padding: 8px 14px;

    border-radius: 20px;

    font-size: 14px;

    z-index: 2;
}