/* THIS FILE IS COPIED FROM THE COMMON LIBRARY AS OF 2025-09-30 11:14:35 GMT. DO NOT EDIT THIS FILE. EDIT THE ORIGINAL IN THE COMMON LIBRARY INSTEAD. */
/* Container & Theme Variables */
agile-frames {
  
    --grid-gap: 8px;
    --handle-size: var(--grid-gap);
    --grid-line-color: gray;
    --grid-line-thickness: 2px;
    --min-frame-width: 1em;
    --min-frame-height: 1em;

    --handle-size: 4px;
    --handle-color: rgba(0, 0, 0, 0.3);
    --handle-hover-color: rgba(0, 0, 0, 0.6);

    --frame-padding: calc(var(--handle-size) / 2 + 4px);

    --transition-duration: 0.3s;

    display: grid;
    gap: var(--grid-gap);
    
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    background: black;
    color: white;
    
}

agile-frames > * {
    background: transparent;
    padding: 8px;
    box-sizing: border-box;
    overflow: auto;
}

agile-frames .resize-handle {
    position: absolute;
    background: var(--handle-color);
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    pointer-events: auto;                   /* allows hovering at zero opacity */
}

/* reveal only the hovered handle */
.resize-handle:hover {
    opacity: 1;
    background: var(--handle-hover-color);
}

/*────────────────────────────────────────────────────────────────────────────*/
/* 4) Column handles */
.resize-handle.col-handle {
    top: 0;
    bottom: 0;
    width: var(--handle-size);
    cursor: col-resize;
    transform: translateX(-50%);
}

/* Row handles */
.resize-handle.row-handle {
  left: 0;
  right: 0;
  height: var(--handle-size);
  cursor: row-resize;
  transform: translateY(-50%);
}