/* ==========================================================================
   Modal redimensionável pela borda — assets/js/app/modal-redimensionavel.js
   As alças ficam por dentro da borda: o .occ-confirm-box tem overflow hidden.
   ========================================================================== */

.xn-modal-borda {
    position: absolute;
    z-index: 5;
    touch-action: none;
}

.xn-modal-borda--esquerda,
.xn-modal-borda--direita {
    top: 12px;
    bottom: 12px;
    width: 8px;
    cursor: ew-resize;
}

.xn-modal-borda--esquerda {
    left: 0;
}

.xn-modal-borda--direita {
    right: 0;
}

.xn-modal-borda--baixo {
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 8px;
    cursor: ns-resize;
}

.xn-modal-borda--canto-esquerdo,
.xn-modal-borda--canto-direito {
    bottom: 0;
    width: 14px;
    height: 14px;
}

.xn-modal-borda--canto-esquerdo {
    left: 0;
    cursor: nesw-resize;
}

/* O canto direito mostra a pegada, como o de um campo de texto que estica. */
.xn-modal-borda--canto-direito {
    right: 0;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 0 55%, var(--occ-line-strong) 55% 62%, transparent 62% 72%,
            var(--occ-line-strong) 72% 79%, transparent 79%);
    opacity: .8;
}

.xn-modal-borda:hover {
    background-color: var(--occ-accent-soft);
}

/* Com tamanho escolhido, o conteúdo ocupa a altura e o corpo rola. */
.xn-modal-dimensionado .modal-content {
    display: flex;
    flex-direction: column;
}

.xn-modal-dimensionado .modal-content > .modal-body,
.xn-modal-dimensionado .modal-content > .occ-confirm-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.xn-modal-dimensionado .xn-exp-previa,
.xn-modal-dimensionado .xn-exp-previa-area iframe {
    min-height: 240px;
}

/* Durante o arrasto: o cursor fica o da borda em qualquer lugar, nada é selecionado, e a prévia em
   PDF (um iframe) não engole o movimento do mouse. */
.xn-redimensionando,
.xn-redimensionando * {
    user-select: none;
}

.xn-redimensionando iframe {
    pointer-events: none;
}

.xn-redimensionando--esquerda *,
.xn-redimensionando--direita * {
    cursor: ew-resize !important;
}

.xn-redimensionando--baixo * {
    cursor: ns-resize !important;
}

.xn-redimensionando--canto-esquerdo * {
    cursor: nesw-resize !important;
}

.xn-redimensionando--canto-direito * {
    cursor: nwse-resize !important;
}

@media (max-width: 575.98px) {
    .xn-modal-borda {
        display: none;
    }
}