/* ************************************************** */
/* #region FLOATERS CONTAINER                         */
/* ************************************************** */

.floaters-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* #endregion */

/* ************************************************** */
/* #region FLOATER                                    */
/* ************************************************** */

/* General styling */
.panel[data-panel-mode="poopover"] {
    appearance: none;
    isolation: isolate;
    flex-direction: column;
    position: fixed;
    padding: 0;
    background-color: var(--bg-color);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
    overflow: visible;  /* Needed for resize handles */
    pointer-events: auto; /* Reinstate pointer events */
    visibility: hidden;  /* Floaters start hidden */
}

/* Initial size and position */
.panel[data-panel-mode="poopover"] {
    --initial-width: 420px;
    --initial-height: 420px;
    top: calc(50% - var(--initial-height) / 2);
    left: calc(50% - var(--initial-width) / 2);
    width: var(--initial-width);
    height: var(--initial-height);
}

.panel[data-panel-mode="poopover"].floater-open {
    display: flex;
}

/* Shadow */
.panel[data-panel-mode="poopover"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bg-color);
    border: 0;
    border-radius: var(--border-radius);
    pointer-events: none;
    will-change: opacity;
    z-index: -1;
}

.panel[data-panel-mode="poopover"]::after {
    content: "";
    position: absolute;
    top: var(--shadow-y);
    left: var(--shadow-x);
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    pointer-events: none;
    will-change: opacity;
    z-index: -2;

    /* ===== Linear Halftone ===== */
    background-image: radial-gradient(
        circle at center, 
        var(--border-color) var(--dot-size), 
        transparent calc(var(--dot-size) + 0px)
    );
    background-size: var(--dot-space) var(--dot-space);

    /* ===== Hex Halftone ===== */
    background-image: 
        radial-gradient(circle at center, var(--border-color) var(--dot-size), transparent calc(var(--dot-size) + 0px)),
        radial-gradient(circle at center, var(--border-color) var(--dot-size), transparent calc(var(--dot-size) + 0px));
    background-size: var(--dot-space) var(--dot-space);
    /* Offset the second gradient by half the spacing */
    background-position: 
        0 0,
        calc(var(--dot-space) / 2) calc(var(--dot-space) / 2);
}

/* FLOATER_DESTINATION = 'container' */
/* Unhide "open" floaters belonging to an active desktop */
.desktop-container.active > .floaters-container .panel[data-panel-mode="poopover"].floater-open {
    visibility: visible;
}

/* FLOATER_DESTINATION = 'body' */
#body-floaters-container > .panel[data-panel-mode="poopover"][data-desktop-active].floater-open {
    visibility: visible;
    z-index: 1;
}

/* #endregion */

/* ************************************************** */
/* #region RESIZE HANDLES                             */
/* ************************************************** */

/* ------------------------- */
/* #region HANDLES CONTAINER */
/* ------------------------- */

.panel[data-panel-mode="poopover"] .panel-resize-handles {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* #endregion */

/* --------------- */
/* #region GENERAL */
/* --------------- */

.panel[data-panel-mode="poopover"] .panel-resize-handle {
    display: block;
    position: absolute;
    pointer-events: auto;

    /* debug */
    background-color: blue;
    opacity: 0;
}

/* #endregion */

/* ------------- */
/* #region EDGES */
/* ------------- */

.panel[data-panel-mode="poopover"] .panel-resize-handle.top,
.panel[data-panel-mode="poopover"] .panel-resize-handle.bottom {
    left: 0;
    width: 100%;
    height: var(--resize-handle-size);
    cursor: ns-resize;
}

.panel[data-panel-mode="poopover"] .panel-resize-handle.top {
    top: 0;
    transform: translate(0, calc(-100% - var(--border-width)));
}

.panel[data-panel-mode="poopover"] .panel-resize-handle.bottom {
    bottom: 0;
    transform: translate(0, calc(100% + var(--border-width)));
}

.panel[data-panel-mode="poopover"] .panel-resize-handle.left,
.panel[data-panel-mode="poopover"] .panel-resize-handle.right {
    top: 0;
    width: var(--resize-handle-size);
    height: 100%;
    cursor: ew-resize;
}

.panel[data-panel-mode="poopover"] .panel-resize-handle.left {
    left: 0;
    transform: translate(calc(-100% - var(--border-width)), 0);
}

.panel[data-panel-mode="poopover"] .panel-resize-handle.right {
    right: 0;
    transform: translate(calc(100% + var(--border-width)), 0);
}

/* #endregion */

/* --------------- */
/* #region CORNERS */
/* --------------- */

.panel[data-panel-mode="poopover"] .panel-resize-handle.corner {
    width: calc(1 * var(--resize-handle-size));
    aspect-ratio: 1 / 1;
    z-index: 2;
}

.panel[data-panel-mode="poopover"] .panel-resize-handle.top-left,
.panel[data-panel-mode="poopover"] .panel-resize-handle.bottom-right {
    cursor: nw-resize;
}

.panel[data-panel-mode="poopover"] .panel-resize-handle.top-right,
.panel[data-panel-mode="poopover"] .panel-resize-handle.bottom-left {
    cursor: nesw-resize;
}

.panel[data-panel-mode="poopover"] .panel-resize-handle.top-left {
    top: 0;
    left: 0;
    transform: translate(calc(-50% - var(--border-width)), calc(-50% - var(--border-width)));
}

.panel[data-panel-mode="poopover"] .panel-resize-handle.top-right {
    top: 0;
    right: 0;
    transform: translate(calc(50% + var(--border-width)), calc(-50% - var(--border-width)));
}

.panel[data-panel-mode="poopover"] .panel-resize-handle.bottom-right {
    bottom: 0;
    right: 0;
    transform: translate(calc(50% + var(--border-width)), calc(50% + var(--border-width)));
}

.panel[data-panel-mode="poopover"] .panel-resize-handle.bottom-left {
    bottom: 0;
    left: 0;
    transform: translate(calc(-50% - var(--border-width)), calc(50% + var(--border-width)));
}

/* #endregion */

/* #endregion */

/* ************************************************** */
/* #region PANEL TITLE                                */
/* ************************************************** */

/* Show "grab" cursor when panel-tile is hovered over */
.panel[data-panel-mode="poopover"] panel-title {
    cursor: grab;
}

/* Show "grabbing" cursor when panel is being dragged */
.panel[data-panel-mode="poopover"].dragging panel-title {
    cursor: grabbing;
}

/* #endregion */

/* ************************************************** */
/* #region PANEL OPTIONS                              */
/* ************************************************** */

/* Hide panel-only options in poopover-mode */
.panel[data-panel-mode="poopover"] .panel-only-options {
    display: none;
}

/* #endregion */

/* ************************************************** */
/* #region MAXIMIZED STATE                            */
/* ************************************************** */

.panel[data-panel-mode="poopover"]:has(.maximize-panel-button input:checked) {
    top: var(--grid-gap) !important;
    left: var(--grid-gap) !important;
    bottom: auto !important;
    right: auto !important;
    width: calc(100% - 2 * var(--grid-gap)) !important;
    height: calc(100% - 2 * var(--grid-gap)) !important;
    box-shadow: none !important;
}

/* Don't show "grab" cursor on panel-title when floater is maximized */
.panel[data-panel-mode="poopover"]:has(.maximize-panel-button input:checked) panel-title {
    cursor: default !important;
}

/* Hide floater's resize handles when maximized */
.panel[data-panel-mode="poopover"]:has(.maximize-panel-button input:checked) resize-handles {
    visibility: hidden;
}

/* #endregion */

/* ************************************************** */
/* #region DRAGGING                                   */
/* ************************************************** */

/* Ensure the "grabbing" cursor when dragging a panel and disable pointer events everywhere */
body:has(.panel[data-panel-mode="poopover"].dragging) {
    cursor: grabbing;
    pointer-events: none;
}

/* Make the dragged floater "see-through" when user is right-button dragging */
.panel[data-panel-mode="poopover"].right-button-drag {
    background-color: transparent;
}

/* Hide the dithered shadow when user is right-button dragging */
.panel[data-panel-mode="poopover"].right-button-drag::before,
.panel[data-panel-mode="poopover"].right-button-drag::after {
    opacity: 0;
}

/* Hide panel tools from all panels when floater is being right-button dragged */
body:has(.panel[data-panel-mode="poopover"].right-button-drag) panel-tools {
    opacity: 0;
}

/* Hide panel content from all panels when a floater is being right-button dragged */
body:has(.panel[data-panel-mode="poopover"].right-button-drag) panel-content {
    opacity: 0;
}

/* Hide portals while floater is being right-button dragged */
body:has(.panel[data-panel-mode="poopover"].right-button-drag) .portal {
    opacity: 0;
}

/* #endregion */