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

.gpa-calculator {
    --gpa-border: var(--border-color, #aaa);
    --gpa-soft: var(--color-secondary, #dee2e6);
    --gpa-text: var(--font-color, #000);
    color: inherit;
}

.gpa-calculator #cumulative,
.gpa-calculator .repeatable-fieldset-item {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: .5rem;
    align-items: end;
}

.gpa-calculator #cumulative {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gpa-calculator .repeatable-fieldset-item {
    margin-bottom: .75rem;
}

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

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

.gpa-calculator .repeatable-fieldset-item select[name$="[grade_letter]"] {
    font-size: 1.17em;
    height: 2rem;
}

.gpa-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;
}

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

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

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

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

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

.gpa-calculator .gpa-error.is-visible {
    display: block;
}

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

@media (max-width: 600px) {
    .gpa-calculator #cumulative,
    .gpa-calculator .repeatable-fieldset-item,
    .gpa-calculator #results {
        grid-template-columns: 1fr;
    }
}