/* ============================================================
   File: regex-tester.css
   Purpose: Regex Tester tool-specific styles.
   Project: DevZTools
   ============================================================ */

.regex-tester-tool__pattern {
    margin-block-end: var(--space-4);
}

.regex-tester-tool__replace-input {
    margin-block-end: var(--space-4);
}

.regex-tester-tool__replacement {
    min-block-size: 6rem;
}

.regex-tester-tool__pattern-input {
    display: block;
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-family-code);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    transition:
        border-color var(--motion-duration-fast) var(--motion-easing-standard),
        box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}

.regex-tester-tool__pattern-input::placeholder {
    color: var(--color-text-placeholder);
}

.regex-tester-tool__pattern-input:hover {
    border-color: var(--color-border-strong);
}

.regex-tester-tool__pattern-input:focus-visible {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus-ring);
    outline: none;
}

.regex-tester-tool__pattern-input--invalid {
    border-color: var(--color-error);
    box-shadow: 0 0 0 1px var(--color-error-soft);
}

.regex-tester-tool__pattern-input--invalid:focus-visible {
    border-color: var(--color-error);
    box-shadow: var(--shadow-focus-ring), 0 0 0 1px var(--color-error-soft);
}

.regex-tester-tool__pattern-feedback {
    margin-top: var(--space-2);
}

.regex-tester-tool__flags {
    margin: var(--space-4) 0 0;
    padding: 0;
    border: none;
}

.regex-tester-tool__flags-legend {
    margin-block-end: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.regex-tester-tool__flags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.regex-tester-tool__flag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.5rem;
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--radius-control);
    background-color: var(--color-surface-muted);
    color: var(--color-text-secondary);
    font-family: var(--font-family-code);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition:
        background-color var(--motion-duration-fast) var(--motion-easing-standard),
        border-color var(--motion-duration-fast) var(--motion-easing-standard),
        color var(--motion-duration-fast) var(--motion-easing-standard);
}

.regex-tester-tool__flag-btn:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
    background-color: var(--color-surface-hover);
}

.regex-tester-tool__flag-btn:focus-visible {
    box-shadow: var(--shadow-focus-ring);
    outline: none;
}

.regex-tester-tool__flag-btn[aria-pressed="true"] {
    border-color: var(--color-accent);
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}

.regex-tester-tool__preview {
    min-block-size: var(--editor-block-size);
    margin: 0;
    padding: var(--space-3);
    overflow: auto;
    border: var(--border-width-thin) solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
    font-family: var(--font-family-code);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
    white-space: pre-wrap;
    word-break: break-word;
}

.regex-tester-tool__preview-placeholder {
    color: var(--color-text-muted);
}

.regex-tester-tool__mark {
    border-radius: var(--radius-sm);
    background-color: var(--color-accent-soft);
    color: var(--color-text-primary);
}

.regex-tester-tool__actions {
    margin-block: var(--space-4);
}

.regex-tester-tool__results-panel {
    margin-block-start: 0;
}

.regex-tester-tool__results {
    min-block-size: 6rem;
}

.regex-tester-tool__empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.regex-tester-tool__no-matches {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.regex-tester-tool__truncation {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.regex-tester-tool__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.regex-tester-tool__match {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-muted);
}

.regex-tester-tool__match-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.regex-tester-tool__match-badge {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-2);
    min-block-size: 1.5rem;
    border-radius: var(--radius-control);
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.regex-tester-tool__match-range {
    margin: 0;
    color: var(--color-text-secondary);
    font-family: var(--font-family-code);
    font-size: var(--font-size-sm);
}

.regex-tester-tool__match-text {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-code);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    word-break: break-all;
}

.regex-tester-tool__groups {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.regex-tester-tool__group {
    display: grid;
    gap: var(--space-1);
}

.regex-tester-tool__group-label {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.regex-tester-tool__group-value {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-code);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    word-break: break-all;
}

@media (max-width: 40rem) {
    .regex-tester-tool__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .regex-tester-tool__actions .tool-page__button {
        width: 100%;
    }

    .regex-tester-tool__flags-list {
        width: 100%;
    }

    .regex-tester-tool__flag-btn {
        flex: 1 1 0;
    }

    .regex-tester-tool__preview {
        min-block-size: 12rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .regex-tester-tool__pattern-input,
    .regex-tester-tool__flag-btn {
        transition: none;
    }
}