/* URL Builder component — mw-ub-* prefix */

.mw-ub {
    --mw-ub-base-color: #42A5F5;
    --mw-ub-path-color: #66BB6A;
    --mw-ub-fragment-color: #FFA726;
    --mw-ub-key-color: #90A4AE;
    --mw-ub-value-color: #CE93D8;
    --mw-ub-sep-color: #616161;
    max-width: 500px;
}

/* NOTE: Preview bar */
.mw-ub-preview {
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
}

.mw-ub-preview-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.mw-ub-preview-url {
    font-family: monospace;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
    min-height: 20px;
}

.mw-ub-c-base { color: var(--mw-ub-base-color); }
.mw-ub-c-path { color: var(--mw-ub-path-color); }
.mw-ub-c-sep  { color: var(--mw-ub-sep-color); }
.mw-ub-c-key  { color: var(--mw-ub-key-color); }
.mw-ub-c-val  { color: var(--mw-ub-value-color); }
.mw-ub-c-frag { color: var(--mw-ub-fragment-color); }

/* NOTE: Section layout */
.mw-ub-section {
    padding: 12px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mw-ub-section:last-child {
    border-bottom: none;
}

.mw-ub-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

.mw-ub-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* NOTE: Auto field with badge */
.mw-ub-auto-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mw-ub-auto-field > .mud-input-control {
    flex: 1;
}

/* NOTE: Query parameter rows */
.mw-ub-param-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.mw-ub-eq {
    font-family: monospace;
    font-size: 14px;
    color: var(--mw-ub-sep-color);
    padding: 0 2px;
    user-select: none;
}

.mw-ub-remove-btn {
    opacity: 0.3;
    transition: opacity 150ms;
}

.mw-ub-param-row:hover .mw-ub-remove-btn {
    opacity: 1;
}