/* #region Panel Main */

.panel--main {
    overflow: hidden;
    position: var(--pd-pos, absolute);
    width: var(--pd-width, 100%);
    height: var(--pd-height, auto);
    z-index: var(--z-badge);
    box-sizing: border-box;
    color: white;
    overflow: visible;
    background: var(--pd-bg, white);
    padding: var(--space-s) var(--space-s);
}

.panel-pos--ne { left: 0; top: 0;}
.panel-pos--n { top: 0; left: 50%; transform: translate(-50%, 0);}
.panel-pos--nw { top: 0; right: 0;}

.panel-pos--e { left: 0; top: 50%; transform: translate(0, -50%);}
.panel-pos--0 { left: 50%; top: 50%; transform: translate(-50%, -50%);}
.panel-pos--w { right: 0; top: 50%; transform: translate(0, -50%);}

.panel-pos--se { left: 0; bottom: 0;}
.panel-pos--s { bottom: 0; left: 50%; transform: translate(-50%, 0);}
.panel-pos--sw { bottom: 0; right: 0;}

.panel-pos--rel {
    position: relative;
}

/* #endregion */

.panel-decoration-framework {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-border);
    overflow: visible !important;
}

/* #region Decoration Structural: Corners + Double Frame */
.pd-structural-corner {
    position: absolute;
    width: var(--corner-size);
    height: var(--corner-size);
    border: var(--corner-thickness) var(--corner-style, solid) var(--corner-color);
    --inset: var(--corner-inset);
    
}
.pd-structural-corner--nw { top: var(--inset); left: var(--inset); border-right: none; border-bottom: none; }
.pd-structural-corner--ne { top: var(--inset); right: var(--inset); border-left: none; border-bottom: none; }
.pd-structural-corner--se { bottom: var(--inset); right: var(--inset); border-right: none; border-top: none; }
.pd-structural-corner--sw { bottom: var(--inset); left: var(--inset); border-left: none; border-top: none; }

/* .pd-structural-corner--nw { top: 0; left: 0; transform: rotate(0deg); }
.pd-structural-corner--ne { top: 0; right: 0; transform: rotate(90deg); }
.pd-structural-corner--se { bottom: 0; right: 0; transform: rotate(180deg); }
.pd-structural-corner--sw { bottom: 0; left: 0; transform: rotate(270deg); } */




.pd-structural-contour--outer {
    --current-inset: var(--outer-inset);
    --current-color: var(--outer-color);
    --current-width: var(--outer-width, 1px);
}
.pd-structural-contour--inner {
    --current-inset: var(--inner-inset);
    --current-color: var(--inner-color);
    --current-width: var(--inner-width, 2px);
}

.pd-structural-line {
    position: absolute;
    background: var(--color, 'red');
    --size_minus: var(--size_minus, 0%);
    --thickness: var(--thickness, 1px);
    opacity: var(--opacity, 1);
    --inset: var(--inset, 0px);

}

.pd-structural-line--left, .pd-structural-line--right {    
    width: var(--thickness);
    top: var(--size_minus); bottom: var(--size_minus);

}
.pd-structural-line--left  { left: var(--inset); }
.pd-structural-line--right { right: var(--inset); }

.pd-structural-line--top, .pd-structural-line--bottom {
    height: var(--thickness);
    left: var(--size_minus); right: var(--size_minus);
}
.pd-structural-line--top    { top: var(--inset); }
.pd-structural-line--bottom { bottom: var(--inset); }

/* #endregion */

/* #region Decoration Edge Shape: Custom SVG Shape on Line */
.pd-edgeshape-side {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;

}

.pd-edgeshape-side--n    { top: 0; left: 0; right: 0; height: 0; }
.pd-edgeshape-side--s { bottom: 0; left: 0; right: 0; height: 0; }
.pd-edgeshape-side--w   { left: 0; top: 0; bottom: 0; width: 0; flex-direction: column; }
.pd-edgeshape-side--e  { right: 0; top: 0; bottom: 0; width: 0; flex-direction: column; }

.pd-edgeshape-line { position: absolute; background: var(--pd-node-line-color, red); }

.pd-edgeshape-side--n .pd-edgeshape-line, .pd-edgeshape-side--s .pd-edgeshape-line { width: var(--line-size, 100%); height: var(--line-width, 4px);  }
.pd-edgeshape-side--w .pd-edgeshape-line, .pd-edgeshape-side--e .pd-edgeshape-line { height: var(--line-size, 100%); width: var(--line-width, 4px); }

/* #endregion */

.panel-bg-simple {
    background: var(--panel-color, var(--silver-dark));
}
.panel-bg-grad {
    background: linear-gradient(
        var(--deg, 45deg),
        var(--color-start, var(--silver-base)) 0%,
        var(--color-mid, var(--silver-dark)) var(--grad-percent, 50%),
        var(--color-end, var(--silver-base)) 100%);
}