/* Shared by the Toolbox My Profile page and the Admin member page. */
/* Profile-image crop editor (js/profile-image-crop.js, both shipped by Web.Shared). The selection is a square the member
   drags and resizes over the picked photo; the page reads it back in image pixels on save. */
.app-crop {
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: hidden; /* keeps the selection's dimming mask on the image, not the page */
    line-height: 0;
    user-select: none;
    -webkit-user-select: none;
}

.app-crop img {
    display: block;
    max-width: 100%;
    max-height: 32rem;
    width: auto;
    height: auto;
}

.app-crop-selection {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    cursor: move;
    touch-action: none;
}

.app-crop-selection::before,
.app-crop-selection::after {
    content: "";
    position: absolute;
    border: 1px dashed rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

.app-crop-selection::before {
    top: 33.333%;
    bottom: 33.333%;
    left: 0;
    right: 0;
    border-left: 0;
    border-right: 0;
}

.app-crop-selection::after {
    left: 33.333%;
    right: 33.333%;
    top: 0;
    bottom: 0;
    border-top: 0;
    border-bottom: 0;
}

.app-crop-handle {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    margin: -0.625rem;
    border-radius: 999px;
    background: var(--color-primary);
    border: 2px solid var(--color-surface);
    touch-action: none;
}

.app-crop-handle[data-handle="nw"] { top: 0; left: 0; cursor: nwse-resize; }
.app-crop-handle[data-handle="ne"] { top: 0; right: 0; cursor: nesw-resize; }
.app-crop-handle[data-handle="sw"] { bottom: 0; left: 0; cursor: nesw-resize; }
.app-crop-handle[data-handle="se"] { bottom: 0; right: 0; cursor: nwse-resize; }