/*Root*/
.lncu-quiz-zuordnung-block {
    --lncu-quiz-zuordnung-option-size: 4rem;
}

/*Zeilen*/
.lncu-quiz-zuordnung-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lncu-quiz-zuordnung-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: var(--lncu-quiz-field-border-width) solid var(--lncu-quiz-field-border);
    border-radius: var(--lncu-quiz-radius);
    background-color: var(--lncu-quiz-field);
    color: var(--lncu-quiz-text);
}

.lncu-quiz-zuordnung-row.is-correct {
    border-color: var(--lncu-quiz-correct);
    background-color: var(--lncu-quiz-correct-surface);
}

.lncu-quiz-zuordnung-row.is-wrong {
    border-color: var(--lncu-quiz-wrong);
    background-color: var(--lncu-quiz-wrong-surface);
}

.lncu-quiz-zuordnung-statement {
    flex: 1 1 24rem;
    min-width: 0;
    margin: 0;
}

/*Auswahlknöpfe*/
.lncu-quiz-zuordnung-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lncu-quiz-zuordnung-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: var(--lncu-quiz-zuordnung-option-size);
    min-height: var(--lncu-quiz-zuordnung-option-size);
    padding: 0.5rem;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    border: 3px solid transparent;
    border-radius: var(--lncu-quiz-radius);
    background-color: var(--lncu-quiz-primary);
    color: var(--lncu-quiz-on-primary);
}

.lncu-quiz-zuordnung-option:focus-visible {
    outline: 3px solid var(--lncu-quiz-hover);
    outline-offset: 2px;
}

/*Gewählt: Fläche wechselt, zusätzlich innerer Ring als Formmerkmal*/
.lncu-quiz-zuordnung-option.is-selected {
    background-color: var(--lncu-quiz-selected);
    border-color: var(--lncu-quiz-on-primary);
}

.lncu-quiz-zuordnung-option[aria-disabled="true"] {
    cursor: default;
}

.lncu-quiz-block .lncu-quiz-zuordnung-option[aria-disabled="true"]:hover { /*mit .lncu-quiz-block, damit es auch gegen die Dark-Mode-Regel von lncu-button gewinnt*/
    filter: none;
}

.lncu-quiz-zuordnung-option.is-wrong {
    background-color: var(--lncu-quiz-wrong);
}

.lncu-quiz-zuordnung-option.is-solution {
    border-style: dashed;
    border-color: var(--lncu-quiz-correct);
    background-color: var(--lncu-quiz-background);
    color: var(--lncu-quiz-correct);
}

/*Media Queries*/
@media (prefers-reduced-motion: reduce) {
    .lncu-quiz-zuordnung-block * {
        transition: none;
        animation: none;
    }
}