/* ************************************************** */
/* #region VARIABLES                                  */
/* ************************************************** */

:root {
    --resize-handle-size: 8px;
    --pin-target-size: 48px;
}

/* #endregion */

/* ************************************************** */
/* #region PANELS CONTAINER                           */
/* ************************************************** */

panels-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: var(--layout-min-w, 0px);
    min-height: var(--layout-min-h, 0px);
    overflow: hidden;
}

/* #endregion */

/* ************************************************** */
/* #region CONTAINER PIN TARGETS                      */
/* ************************************************** */

.container-pin-target {
    background: red;
    opacity: 1;
    visibility: hidden;
}

.container-pin-target.top,
.container-pin-target.bottom {
    width: calc(100% - 1 * 8px - 2 *  var(--border-width));
}

.container-pin-target.top {
    transform: translate(-50%, calc(-100% + 8px - 3 * var(--border-width)));
}

.container-pin-target.bottom {
    transform: translate(-50%, calc(100% - 8px + 3 * var(--border-width)));
}

.container-pin-target.left,
.container-pin-target.right {
    height: calc(100% - 1 * 8px - 2 * var(--border-width));
}

.container-pin-target.left {
    transform: translate(calc(-100% + 8px - 3 * var(--border-width)), -50%);
}

.container-pin-target.right {
    transform: translate(calc(100% - 8px + 3 * var(--border-width)), -50%);
}

/* #endregion */

/* ************************************************** */
/* #region PANEL WRAPPER                              */
/* ************************************************** */

panel-wrapper {
    display: block;
    padding: calc(var(--grid-gap) / 2);
}

/* #endregion */

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

panel-wrapper .panel {
    display: flex;
    flex-direction: column;
    position: static;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--bg-color);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
}

/* popover panels are handled in popovers.css */

.panel:focus-visible,
.panel:focus-within,
.panel:has([popover="auto"]:popover-open),
.panel.portal-content-focused {
    outline: auto;
    outline-color: var(--text-color);
    outline-offset: var(--border-width);
}

/* #endregion */

/* ************************************************** */
/* #region RESIZE HANDLES - PANEL-MODE                */
/* ************************************************** */

.panel .panel-resize-handles {
    display: none;
}

.handle-layer {
    position: absolute;
    /*
    inset: 0px;
    pointer-events: none;
    */
    z-index: 9;
}

.handle-layer .resize-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;

    /* degub */
    background-color: transparent; /* change color to visualize */
}

.handle-layer .resize-handle[data-axis="h"] {
    height: calc(1 * var(--resize-handle-size));
    cursor: row-resize;
}

.handle-layer .resize-handle[data-axis="h"]:hover::after {
    content: "";
    width: 24px;
    height: var(--border-width);
    background-color: var(--border-color);
    opacity: 0;
}

.handle-layer .resize-handle[data-axis="v"] {
    width: calc(1 * var(--resize-handle-size));
    cursor: col-resize;
}

.handle-layer .resize-handle[data-axis="v"]:hover::after {
    content: "";
    width: var(--border-width);
    height: 24px;
    background-color: var(--border-color);
    opacity: 0;
}

.handle-layer .corner-handle {
    position: absolute;
    width: calc(2 * var(--resize-handle-size));
    height: calc(2 * var(--resize-handle-size));
    border-radius: 50%;
    cursor: move;

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

/* #endregion */

/* ************************************************** */
/* #region PANELS-CONTAINER PIN TARGETS               */
/* ************************************************** */

.panels-container-pin-targets {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: 9;
}

:has(.panel.dragging) .panels-container-pin-targets {
    visibility: visible;
}

.panels-container-pin-target {
    display: block;
    position: absolute;
    pointer-events: auto;

    /* debug */
    background-color: transparent;
}

.panels-container-pin-target.top,
.panels-container-pin-target.bottom {
    left: 0;
    width: 100%;
    height: 400px;
}

.panels-container-pin-target.top {
    top: 0;
    transform: translate(0, calc(-100% + 8px))
}

.panels-container-pin-target.bottom {
    bottom: 0;
    transform: translate(0, calc(100% - 8px))
}

.panels-container-pin-target.left,
.panels-container-pin-target.right {
    top: 8px;
    width: 24px;
    height: calc(100% - 2 * 8px);
}

.panels-container-pin-target.left {
    left: 0;
    transform: translate(calc(-100% + 8px), 0);
}

.panels-container-pin-target.right {
    right: 0;
    transform: translate(calc(100% - 8px), 0);
}

/* #endregion */

/* ************************************************** */
/* #region PANEL PIN TARGETS                          */
/* ************************************************** */

.panel-pin-targets {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: 99;
}

/* Floaters never have pin targets */
.panel[popover="manual"] .panel-pin-targets,
.panel[data-panel-mode="poopover"] .panel-pin-targets {
    display: none;
}

/* Make pin targets visible when an app, panelized or floater, is right-dragged */
:has(.panel.dragging.right-button-drag) .panel-pin-targets {
    visibility: visible;

    /* Create a solid mask, but tell it not to repeat */
    /*
    -webkit-mask-image: linear-gradient(black, black);
    mask-image: linear-gradient(black, black);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    */

    /* Bind its size and position to our JS variables */
    /*
    -webkit-mask-size: var(--mask-w, 0px) var(--mask-h, 0px);
    mask-size: var(--mask-w, 0px) var(--mask-h, 0px);
    -webkit-mask-position: var(--mask-x, -9999px) var(--mask-y, -9999px);
    mask-position: var(--mask-x, -9999px) var(--mask-y, -9999px);
    */
}

/* But hide dragged panel's own pin targets */
.panel.dragging .panel-pin-targets {
    display: none;
}

.panel-pin-target {
    display: block;
    position: absolute;
    border: 0;
    border-radius: var(--border-radius);

    /* debug */
    background-color: transparent;
}

.panel-pin-target::after {
    content: "";
    display: block;
    position: absolute;
    border: var(--border-width) dashed var(--border-color);
    border-radius: var(--border-radius);
}

.panel-pin-target.invalid-target {
    visibility: hidden;
}

.panel-pin-target.top,
.panel-pin-target.bottom {
    left: 50%;
    width: calc(100% - 2 * var(--pin-target-size) - 24px);
    height: var(--pin-target-size);
    transform: translate(-50%, 0);
}

.panel-pin-target.top::after,
.panel-pin-target.bottom::after {
    left: calc(-1 * var(--pin-target-size) - 4px);
    width: calc(100% + 2 * var(--pin-target-size) + 8px);
    height: 100%;
}

.panel-pin-target.top {
    top: 8px;
}

.panel-pin-target.bottom {
    bottom: 8px;
}

.panel-pin-target.left,
.panel-pin-target.right {
    top: 50%;
    width: var(--pin-target-size);
    height: calc(100% - 2 * var(--pin-target-size) - 24px);
    transform: translate(0, -50%);
}

.panel-pin-target.left::after,
.panel-pin-target.right::after {
    top: calc(-1 * var(--pin-target-size) - 4px);
    width: 100%;
    height: calc(100% + 2 * var(--pin-target-size) + 8px);
}

.panel-pin-target.left {
    left: 8px;
}

.panel-pin-target.right {
    right: 8px;
}

/* #endregion */

/* ************************************************** */
/* #region PANELIZING (PINNING)                       */
/* ************************************************** */

.placeholder-element.panel {
    opacity: 0;
}

/* #endregion */

/* ************************************************** */
/* #region RESIZING                                   */
/* ************************************************** */

body:has(.resize-handle[data-axis="h"].resizing) {
    cursor: row-resize;
}

body:has(.resize-handle[data-axis="v"].resizing) {
    cursor: col-resize;
}

body:has(.corner-handle.resizing) {
    cursor: move;
}

/* #endregion */

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

panel-wrapper.dragging {
    will-change: transform;
    contain: layout;  /* stops layout side-effects from bleeding outward */
    z-index: 2;
}

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

/* Make the panel "see-through" when dragging */
.panel[data-panel-mode="panel"].dragging {
    background-color: transparent;
}

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

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

/* Make the control-bar transparent when panel is being dragged */
body:has(.panel[data-panel-mode="panel"].dragging) control-bar {
    background-color: transparent;
}

/* Allow overflow to be visible when panel is being dragged */
body:has(.panel[data-panel-mode="panel"].dragging) main-content,
body:has(.panel[data-panel-mode="panel"].dragging) desktop-container,
body:has(.panel[data-panel-mode="panel"].dragging) panels-container {
    overflow: visible;
}

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

/* #endregion */

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

panel-title-bar {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0.25em;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* #endregion */

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

panel-title {
    --icon-stroke-width: 1.25px;

    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    touch-action: none;
    user-select: none;
}

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

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

.panel-title-icon {
    flex-shrink: 0;
    margin-right: 0.25em;
}

.panel-title-label {
    display: block;
    align-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* #endregion */

/* ************************************************** */
/* #region PANEL TOOLS                                */
/* ************************************************** */

panel-tools {
    display: flex;
    flex-direction: row;
    gap: 0.25em;
    opacity: 0;
}

.panel:hover panel-tools,
.panel:focus panel-tools,
.panel:focus-visible panel-tools,
.panel:focus-within panel-tools,
.panel:has(:popover-open) panel-tools,
.panel.portal-content-focused panel-tools {
    opacity: 1;
}

.panel-tool {
    position: relative;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.panel-tool:hover {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

panel-wrapper:has(.maximize-panel-button input:checked) .close-panel-button {
    display: none;
}

/* ---------------------- */
/* #region Panel controls */
/* ---------------------- */

.maximize-panel-button span[icon="restore"] {
    display: none;
}

.maximize-panel-button:has(input:checked) span[icon="maximize"] {
    display: none;
}

.maximize-panel-button:has(input:checked) span[icon="restore"] {
    display: flex;
}

/* #endregion */

/* --------------------- */
/* #region Toggle button */
/* --------------------- */

.panel-tools-toggle {
    display: flex;
    align-items: center;
    padding-inline: 0.25em;
    border-radius: var(--border-radius);
    cursor: pointer;
    user-select: none;
}

.panel-tools-toggle:hover {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

.panel-tools-toggle:has(input:checked) {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

.panel-tools-toggle::before {
    content: "[ ]";
    display: flex;
    justify-content: center;
    align-items: center;
    width: max(3ch, 1.5em);
    height: 1.5em;
    margin-right: 1ch;
}

.panel-tools-toggle:has(input:checked)::before {
    content: "[×]";
}

.panel-tool-toggle-icon {
    display: none;
}

/* #endregion */

/* #endregion */

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

/* Hide panel splitting options by default */
.split-options {
    display: none;
}

/* Show panel splitting options for splittable widgets */
[data-splittable="true"] .split-options {
    display: flex;
}

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

/* #endregion */

/* ************************************************** */
/* #region PANEL CONTENT                              */
/* ************************************************** */

panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    min-height: 0;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    overflow: auto;
}

/* #endregion */

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

panel-wrapper:has(.maximize-panel-button input:checked) {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: calc(infinity);
}

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

/* Hide all other panels other than the maximized panel */
panels-container:has(.maximize-panel-button input:checked) panel-wrapper:not(:has(.maximize-panel-button input:checked)),
panels-container:has(.maximize-panel-button input:checked) panel-wrapper:not(:has(.maximize-panel-button input:checked)) * {
    visibility: hidden !important;
}

/* Hide the popout and split buttons when panel is maximized */
.panel[data-panel-mode="panel"]:has(.maximize-panel-button input:checked) .panel-only-options {
    display: none;
}

/* Hide floaters whenever a panelized app is maximized */
body:has(.panel[data-panel-mode="panel"] .maximize-panel-button input:checked) .panel[data-panel-mode="poopover"] {
    visibility: hidden;
}

/* Hide portals when a panel is maximized. Note that individual portals must unhide themselves if their owner is the panel that is maximized! */
body:has(.maximize-panel-button input:checked) .portal {
    visibility: hidden;
}

/* #endregion */

/* ************************************************** */
/* #region DESKTOP SWITCHING                        */
/* ************************************************** */

/* Hide parked panels during desktop switching */
[data-parked] {
    display: none;
}

/* Hide portals during desktop switching */
body:has([data-parked]) .portal {
    display: none;
}

/* #endregion */