/**
 * Corner Frame Widget Styles
 * Matches Jayden theme border styling
 */

.corner-frame {
    --corner-size: 40px;
    --line-thickness: 1px;
    --line-color: rgba(255, 255, 255, 0.15);
    --corner-color: rgba(255, 255, 255, 0.25);
    --frame-offset: 20px;
    
    position: relative;
    width: 100%;
    pointer-events: none;
}

/* Lines */
.corner-frame__line {
    position: absolute;
    background-color: var(--line-color);
}

.corner-frame__line--top {
    top: 0;
    left: var(--frame-offset);
    right: var(--frame-offset);
    height: var(--line-thickness);
}

.corner-frame__line--bottom {
    bottom: 0;
    left: var(--frame-offset);
    right: var(--frame-offset);
    height: var(--line-thickness);
}

.corner-frame__line--left {
    top: var(--frame-offset);
    bottom: var(--frame-offset);
    left: 0;
    width: var(--line-thickness);
}

.corner-frame__line--right {
    top: var(--frame-offset);
    bottom: var(--frame-offset);
    right: 0;
    width: var(--line-thickness);
}

/* Corners */
.corner-frame__corner {
    position: absolute;
    width: var(--corner-size);
    height: var(--corner-size);
}

.corner-frame__corner-h,
.corner-frame__corner-v {
    position: absolute;
    background-color: var(--corner-color);
}

.corner-frame__corner-h {
    height: var(--line-thickness);
    width: 100%;
}

.corner-frame__corner-v {
    width: var(--line-thickness);
    height: 100%;
}

/* Top Left */
.corner-frame__corner--top-left {
    top: 0;
    left: var(--frame-offset);
}

.corner-frame__corner--top-left .corner-frame__corner-h {
    top: 0;
    left: calc(-1 * var(--frame-offset));
}

.corner-frame__corner--top-left .corner-frame__corner-v {
    top: 0;
    left: calc(-1 * var(--frame-offset));
}

/* Top Right */
.corner-frame__corner--top-right {
    top: 0;
    right: var(--frame-offset);
}

.corner-frame__corner--top-right .corner-frame__corner-h {
    top: 0;
    right: calc(-1 * var(--frame-offset));
}

.corner-frame__corner--top-right .corner-frame__corner-v {
    top: 0;
    right: calc(-1 * var(--frame-offset));
}

/* Bottom Left */
.corner-frame__corner--bottom-left {
    bottom: 0;
    left: var(--frame-offset);
}

.corner-frame__corner--bottom-left .corner-frame__corner-h {
    bottom: 0;
    left: calc(-1 * var(--frame-offset));
}

.corner-frame__corner--bottom-left .corner-frame__corner-v {
    bottom: 0;
    left: calc(-1 * var(--frame-offset));
}

/* Bottom Right */
.corner-frame__corner--bottom-right {
    bottom: 0;
    right: var(--frame-offset);
}

.corner-frame__corner--bottom-right .corner-frame__corner-h {
    bottom: 0;
    right: calc(-1 * var(--frame-offset));
}

.corner-frame__corner--bottom-right .corner-frame__corner-v {
    bottom: 0;
    right: calc(-1 * var(--frame-offset));
}

/* Style Variations */

/* Top Corners Only - hide the line */
.corner-frame--top-corners .corner-frame__line--top {
    display: none;
}

/* All Corners - no lines */
.corner-frame--all-corners .corner-frame__line {
    display: none;
}

/* Top Line with Corners - show line */
.corner-frame--top-line .corner-frame__line--top {
    display: block;
}

/* Full Frame - show all */
.corner-frame--full-frame .corner-frame__line {
    display: block;
}