/* CSS box-shadow generator - sliders + color + opacity + inset on the left, a live preview
   box on the right, and the generated declaration below. Reuses base .copy-btn; all colors
   come from theme tokens only. JS sets the preview box's inline box-shadow and the readouts. */

/* Controls beside the preview on wide screens, stacked on narrow. */
.bs-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 720px) { .bs-layout { grid-template-columns: 1fr; } }

.bs-controls { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.bs-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bs-control-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.bs-label { font-size: 14px; color: var(--muted); font-weight: 600; }

.bs-readout {
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 14px; font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Sliders pick up the theme accent for their thumb/track fill. */
.bs-range { width: 100%; min-width: 0; accent-color: var(--accent); }

/* Native color swatch, sized and bordered to match the field language. */
.bs-color {
    width: 100%; height: 44px; padding: 4px; box-sizing: border-box;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    cursor: pointer;
}
.bs-color:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* Inset toggle: label wraps the checkbox so the whole row is clickable. */
.bs-inset .bs-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.bs-inset input { accent-color: var(--accent); width: 16px; height: 16px; }

/* Preview area: a neutral, token-based backdrop so the shadow reads in both themes, with
   generous padding so even large offsets and spread stay visible. */
.bs-preview {
    display: flex; align-items: center; justify-content: center;
    min-height: 320px; padding: 60px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--bg);
}

/* The previewed box; JS sets its inline box-shadow. A light surface fill keeps it distinct
   from the backdrop in both themes. */
.bs-box {
    width: 140px; height: 140px; flex: 0 0 auto;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
}

/* Generated declaration, monospace, in a token-styled block with the copy button alongside. */
.bs-output { margin-top: 24px; }
.bs-output-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }

.bs-css {
    display: block; width: 100%; box-sizing: border-box; padding: 14px;
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 15px; font-weight: 600; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    white-space: pre-wrap; word-break: break-word;
}