/*
 * Line thickness selector styling + surface outline scaling.
 * Additive stylesheet (Open/Closed): loaded AFTER drawDiagramsStyle.css so its
 * equal-specificity rules win in the cascade without modifying existing files.
 *
 * The JS module (lineThicknessSelector.js) sets --envelopy-line-thickness on
 * :root whenever the user picks a thickness level.
 */

:root {
    --envelopy-line-thickness: 1px;
}

/* ── Drop-up menu formatting ─────────────────────────────────────────── */
#lineThicknessMenu {
    padding: 4px 0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.12);
    width: 64px;
    min-width: 0;
}

#lineThicknessMenu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    cursor: pointer;
}

#lineThicknessMenu .dropdown-item.active {
    background-color: #e7f1ff;
    color: #0d6efd;
}

/* Line preview showing the relative thickness */
#lineThicknessMenu .thickness-preview {
    display: block;
    width: 36px;
    min-width: 36px;
    background-color: #212529;
    border-radius: 1px;
}

#lineThicknessMenu .dropdown-item.active .thickness-preview {
    background-color: #0d6efd;
}

#lineThicknessMenu [data-thickness="normal"] .thickness-preview { height: 6px; }
#lineThicknessMenu [data-thickness="small"]  .thickness-preview { height: 3px; }
#lineThicknessMenu [data-thickness="xsmall"] .thickness-preview { height: 1px; }

/* ── Surface (polygon) outlines follow the selected line thickness ───── */
polygon[typeOfPolygon="main"],
polygon[typeOfPolygon="internal"] {
    stroke-width: var(--envelopy-line-thickness, 1px) !important;
}

/* Match (and override) the hover/selection rules from drawDiagramsStyle.css */
body:not(.tooltips-only-mode):not(.interactions-disabled) polygon[typeOfPolygon="main"].polygon-hover,
body:not(.tooltips-only-mode):not(.interactions-disabled) polygon[typeOfPolygon="internal"].polygon-hover {
    stroke-width: var(--envelopy-line-thickness, 1px) !important;
}

polygon.multi-selected {
    stroke-width: var(--envelopy-line-thickness, 1px) !important;
}