.answer-item {
    border-radius: 4px;
    min-height: 4rem;
    padding: .5rem 1rem;
    display: grid;
    grid-template-columns: min-content auto min-content;
    margin: auto 0;
    gap: .5rem;
}

.answer-item > * {
    align-self: center;
}

.fill-in-answer {
    border: 1px solid;
    padding: 1px 2px;
    border-radius: 2px;
    display: inline-grid;
    grid-template-columns: auto auto auto;
}

.answer-border-left {
    border-left: 1px solid #888;
}

.possible-answers {
    padding: 0 4px;
}

.user-answer {
    padding-right: 4px;
}

i.answer-icon {
    font-size: 32px;
    line-height: 1;
    padding: 0;
}

i.answer-icon-sm {
    font-size: 20px;
    line-height: 1;
    padding: 0;
}

.fill-in {
    font-size: inherit;
}

.correct {
    color: var(--primary-green);
}

.incorrect {
    color: var(--primary-red);
}

.correct-bg {
    background-color: var(--pale-green);
}

.incorrect-bg {
    background-color: var(--pale-red);
}

.fill-in-answer.correct {
    border-color: var(--primary-green)
}

.fill-in-answer.incorrect {
    border-color: var(--primary-red)
}

.answer-icon-container {
    margin-left: 1rem;
}

.bool-input {
    width: 20px;
    height: 20px;
}