@import url("/core/components/calculate/lib/repeatable-fieldsets.css?v=1");

.grade-calculator {
    --grade-border: var(--border-color, #aaa);
    color: inherit;
}

.grade-calculator .repeatable-fieldset-item {
    display: grid;
    grid-template-columns: minmax(10rem, 2fr) repeat(3, minmax(7rem, 1fr)) auto;
    gap: .5rem;
    align-items: end;
    margin-bottom: .75rem;
}

.grade-calculator .repeatable-fieldset-item .calcfield,
.grade-calculator .repeatable-fieldset-item input {
    min-width: 0;
    width: 100%;
}

.grade-calculator .repeatable-fieldset-item .calcfield[hidden],
.grade-calculator fieldset[hidden] {
    display: none !important;
}

.grade-calculator [data-repeatable-remove] {
    width: 2rem !important;
    min-width: 2rem;
    height: 2rem;
    margin: 0 0 .25rem !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-color: #b42318 !important;
    background: #b42318 !important;
    color: #fff !important;
    font-size: 1.25rem;
    line-height: 1;
}

.grade-calculator [data-repeatable-remove]:hover,
.grade-calculator [data-repeatable-remove]:focus {
    border-color: #8f1c13 !important;
    background: #8f1c13 !important;
}

.grade-calculator [data-repeatable-remove]:disabled {
    opacity: .45;
}

.grade-calculator #controls {
    display: block;
}

.grade-calculator #controls [data-repeatable-add="grade_rows"],
.grade-calculator #controls .mlfield_sample,
.grade-calculator #controls .mlfield_clear {
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100%;
    flex: 0 0 auto !important;
}

.grade-calculator .grade-message {
    display: none;
    margin: .75rem 0;
    padding: .75rem;
    border-left: 4px solid #f47c20;
}

.grade-calculator .grade-message.is-visible {
    display: block;
}

.grade-calculator .grade-warning {
    border-left-color: #2e89ae;
}

.grade-calculator #points_results,
.grade-calculator #weighted_results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.grade-calculator [aria-invalid="true"] {
    outline: 2px solid #b42318;
    outline-offset: 1px;
}

@media (max-width: 600px) {
    .grade-calculator .repeatable-fieldset-item {
        grid-template-columns: 1fr;
        padding: .75rem;
        border: 1px solid var(--grade-border);
        border-radius: .4rem;
    }

    .grade-calculator #points_results,
    .grade-calculator #weighted_results {
        grid-template-columns: 1fr;
    }
}