/*Root*/
.lncu-quiz-lueckentext-block {
    --lncu-quiz-lueckentext-gap-min-width: 7rem;
}

/*Text: Lücken stehen in der Zeile; etwas mehr Zeilenabstand für Felder und Wörter*/
.lncu-quiz-lueckentext-text {
    line-height: 2.6;
}

.lncu-quiz-lueckentext-text p {
    margin: 0 0 1rem;
}

.lncu-quiz-lueckentext-text p:last-child {
    margin-bottom: 0;
}

/*Lücke mit folgendem Satzzeichen: bricht nicht um*/
.lncu-quiz-lueckentext-nowrap {
    white-space: nowrap;
}

/*Lücke*/
.lncu-quiz-lueckentext-gap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    vertical-align: middle;
    margin: 0.4rem 0; /*Abstand, damit sich die Rahmen in benachbarten Zeilen nicht berühren*/
    line-height: 1.2;
}

/*Eintippen: Eingabefeld*/
.lncu-quiz-lueckentext-input {
    max-width: 100%;
    padding: 0.3rem 0.6rem;
    font: inherit;
    border: var(--lncu-quiz-field-border-width) solid var(--lncu-quiz-field-border); /*zugleich Schreiblinie, auch im Druck*/
    border-radius: var(--lncu-quiz-radius);
    background-color: var(--lncu-quiz-field);
    color: var(--lncu-quiz-text);
}

.lncu-quiz-lueckentext-input:focus {
    outline: none;
    border-color: var(--lncu-quiz-primary);
}

.lncu-quiz-lueckentext-gap.is-correct .lncu-quiz-lueckentext-input {
    border-color: var(--lncu-quiz-correct);
    background-color: var(--lncu-quiz-correct-surface);
}

.lncu-quiz-lueckentext-gap.is-wrong .lncu-quiz-lueckentext-input {
    border-color: var(--lncu-quiz-wrong);
    background-color: var(--lncu-quiz-wrong-surface);
}

/*Wörter wählen: gestricheltes Ablagefeld*/
.lncu-quiz-lueckentext-gap.is-choose {
    min-width: var(--lncu-quiz-lueckentext-gap-min-width);
    min-height: 3.2rem;
    padding: 0.2rem;
    border: var(--lncu-quiz-field-border-width) dashed var(--lncu-quiz-primary);
    border-radius: var(--lncu-quiz-radius);
    background-color: var(--lncu-quiz-field);
    cursor: pointer;
}

.lncu-quiz-lueckentext-gap.is-choose:focus-visible {
    outline: 3px solid var(--lncu-quiz-hover);
    outline-offset: 2px;
}

/*Überfahren: blasse Fläche zeigt, dass die Lücke ein Wort aufnimmt*/
@media (hover: hover) {
    .lncu-quiz-lueckentext-gap.is-choose:hover:not([aria-disabled="true"]):not(.is-drop-target) {
        background-color: var(--lncu-quiz-field-hover);
    }
}

.lncu-quiz-lueckentext-gap.is-choose.is-drop-target {
    border-style: solid;
    background-color: var(--lncu-quiz-surface-strong);
}

.lncu-quiz-lueckentext-gap.is-choose.is-correct {
    border-style: solid;
    border-color: var(--lncu-quiz-correct);
    background-color: var(--lncu-quiz-correct-surface);
}

.lncu-quiz-lueckentext-gap.is-choose.is-wrong {
    border-style: solid;
    border-color: var(--lncu-quiz-wrong);
    background-color: var(--lncu-quiz-wrong-surface);
}

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

.lncu-quiz-lueckentext-slot {
    display: inline-flex;
}

.lncu-quiz-lueckentext-slot:empty {
    display: none;
}

/*Builder: Lösung in der Lücke*/
.lncu-quiz-lueckentext-target {
    padding: 0 0.4rem;
    font-weight: 700;
}

.lncu-quiz-lueckentext-solution {
    font-weight: 700;
}

.lncu-quiz-lueckentext-solution:empty {
    display: none;
}

.lncu-quiz-lueckentext-gap .lncu-quiz-marks {
    flex-shrink: 0;
}

/*Wortleiste*/
.lncu-quiz-lueckentext-pool {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    min-height: 5rem;
    padding: 0.5rem;
    border: var(--lncu-quiz-field-border-width) dashed var(--lncu-quiz-line);
    border-radius: var(--lncu-quiz-radius);
}

.lncu-quiz-lueckentext-pool.is-drop-target {
    border-color: var(--lncu-quiz-primary);
    background-color: var(--lncu-quiz-surface-strong);
}

/*Vollbild: Die Wortleiste bleibt am unteren Rand sichtbar, während der Text darüber scrollt*/
.lncu-quiz-block.is-fullscreen .lncu-quiz-lueckentext-pool {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background-color: var(--lncu-quiz-background);
}

.lncu-quiz-block.is-fullscreen .lncu-quiz-lueckentext-pool.is-drop-target {
    background-color: var(--lncu-quiz-surface-strong);
}

/*Wort*/
.lncu-quiz-lueckentext-chip {
    padding: 0.4rem 0.8rem;
    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);
    -webkit-user-select: none;
    user-select: none;
}

.lncu-quiz-lueckentext-chip[draggable="true"] {
    cursor: grab;
}

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

/*Ausgewählt: Fläche wechselt, zusätzlich heller Ring als Formmerkmal*/
.lncu-quiz-lueckentext-chip.is-selected {
    background-color: var(--lncu-quiz-selected);
    border-color: var(--lncu-quiz-on-primary);
}

.lncu-quiz-lueckentext-chip.is-dragging {
    opacity: 0.4;
}

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

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

/*Media Queries*/
@media (max-width: 478px) {
    .lncu-quiz-lueckentext-block {
        --lncu-quiz-lueckentext-gap-min-width: 5rem;
    }

    .lncu-quiz-lueckentext-chip {
        padding: 0.3rem 0.6rem;
        font-size: 1.4rem;
    }
}

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