// =============================================================================
// GLINT UI: Style Properties Test Suite
// Tests: opacity, font-weight, text-align, line-height, display: none
// =============================================================================

@version 1
@style "main.glts"

@global $show_secret = true

Window(title="Style Test Suite", width=800, height=600) {
    Panel(class="layout-viewport") {
        Header "Style Properties Test Suite"

        // ── 1. Opacity ───────────────────────────────────────────────
        Text(class="test-section-header") "1. Opacity"
        Panel(class="test-row") {
            Panel(class="opacity-fade") {
                Text "Fade (0.3)"
            }
            Panel(class="opacity-mid") {
                Text "Mid (0.6)"
            }
            Panel(class="opacity-subtle") {
                Text "Subtle (0.85)"
            }
        }

        Divider()

        // ── 2. Font Weight ────────────────────────────────────────────
        Text(class="test-section-header") "2. Font Weight"
        Panel(class="test-row") {
            Text(class="fw-light") "Light 300"
            Text(class="fw-normal") "Normal 400"
            Text(class="fw-bold") "Bold 700"
            Text(class="fw-black") "Black 900"
        }

        Divider()

        // ── 3. Text Align ─────────────────────────────────────────────
        Text(class="test-section-header") "3. Text Align"
        Panel(class="ta-box") { Text(class="ta-left")   "Left Aligned" }
        Panel(class="ta-box") { Text(class="ta-center") "Center Aligned" }
        Panel(class="ta-box") { Text(class="ta-right")  "Right Aligned" }

        Divider()

        // ── 4. Comma-separated Selectors ─────────────────────────────
        Text(class="test-section-header") "4. Comma Selectors"
        Panel(class="layout-row") {
            Text(class="warning-text") "⚠ Warning text"
            Text(class="error-text") "✖ Error text"
        }

        Divider()

        // ── 6. Line Height ────────────────────────────────────────────
        Text(class="test-section-header") "4. Line Height"
        Panel(class="lh-box") {
            Text(class="lh-tight") "Line height 0.8 — плотный текст для проверки межстрочного интервала. Текст должен быть более сжатым по вертикали."
        }
        Panel(class="lh-box") {
            Text(class="lh-normal") "Line height 1.2 — нормальное значение по умолчанию. Этот блок служит эталоном для сравнения."
        }
        Panel(class="lh-box") {
            Text(class="lh-loose") "Line height 2.0 — разреженный текст для наглядного сравнения. Строки должны быть хорошо заметно разделены."
        }

        Divider()

        // ── 7. Display: None ──────────────────────────────────────────
        Text(class="test-section-header") "5. Display: None"
        Panel(class="hidden-box") {
            Text "Этого блока не должно быть видно!"
        }
        @if $show_secret {
            Text "✅ Блок с display:none скрыт (выше не видно красную панель)."
        }
    }
}