/* Crop photo stage built by js/imageCrop.js inside ImageCropModal's host div. */

:root {
    --hic-mask: rgba(0, 0, 0, .55);
    --hic-stage-bg: #f1f3f5;
    --hic-frame: #ffffff;
    --hic-frame-shadow: rgba(0, 0, 0, .45);
    --hic-grid: rgba(255, 255, 255, .45);
    --hic-handle-bg: #ffffff;
    --hic-handle-border: #1f2937;
    --hic-focus: #4f46e5;
    --hic-readout-bg: rgba(17, 24, 39, .8);
    --hic-readout-fg: #ffffff;
}

[data-theme="dark"] {
    --hic-stage-bg: #111827;
    --hic-frame: #f9fafb;
    --hic-grid: rgba(255, 255, 255, .35);
    --hic-handle-bg: #f9fafb;
    --hic-handle-border: #030712;
    --hic-focus: #a5b4fc;
    --hic-readout-bg: rgba(3, 7, 18, .85);
    --hic-readout-fg: #f9fafb;
}

.hic-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background: var(--hic-stage-bg);
}

.hic-img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
}

.hic-loading .hic-img,
.hic-failed .hic-img,
.hic-loading .hic-mask,
.hic-failed .hic-mask,
.hic-loading .hic-rect,
.hic-failed .hic-rect,
.hic-loading .hic-readout,
.hic-failed .hic-readout {
    visibility: hidden;
}

.hic-mask {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hic-hole {
    position: absolute;
    box-shadow: 0 0 0 9999px var(--hic-mask);
}

.hic-rect {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--hic-frame);
    box-shadow: 0 0 0 1px var(--hic-frame-shadow);
    cursor: move;
    outline: none;
}

.hic-rect:focus-visible {
    box-shadow: 0 0 0 1px var(--hic-frame-shadow), 0 0 0 4px var(--hic-focus);
}

.hic-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    background-image:
        linear-gradient(to right, transparent calc(33.333% - .5px), var(--hic-grid) calc(33.333% - .5px), var(--hic-grid) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), var(--hic-grid) calc(66.666% - .5px), var(--hic-grid) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
        linear-gradient(to bottom, transparent calc(33.333% - .5px), var(--hic-grid) calc(33.333% - .5px), var(--hic-grid) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), var(--hic-grid) calc(66.666% - .5px), var(--hic-grid) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}

.hic-dragging .hic-grid {
    opacity: 1;
}

/* 24 px hit area (32 px on touch) around a 12 px visible square. */
.hic-handle {
    position: absolute;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    touch-action: none;
}

.hic-handle::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    background: var(--hic-handle-bg);
    border: 2px solid var(--hic-handle-border);
    border-radius: 2px;
}

.hic-handle-nw { left: 0; top: 0; cursor: nwse-resize; }
.hic-handle-n { left: 50%; top: 0; cursor: ns-resize; }
.hic-handle-ne { left: 100%; top: 0; cursor: nesw-resize; }
.hic-handle-e { left: 100%; top: 50%; cursor: ew-resize; }
.hic-handle-se { left: 100%; top: 100%; cursor: nwse-resize; }
.hic-handle-s { left: 50%; top: 100%; cursor: ns-resize; }
.hic-handle-sw { left: 0; top: 100%; cursor: nesw-resize; }
.hic-handle-w { left: 0; top: 50%; cursor: ew-resize; }

@media (pointer: coarse) {
    .hic-handle {
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
    }

    .hic-handle::after {
        left: 9px;
        top: 9px;
        width: 14px;
        height: 14px;
    }
}

.hic-readout {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: .75rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    background: var(--hic-readout-bg);
    color: var(--hic-readout-fg);
    pointer-events: none;
}