.calculator-deck .calc-formbody--color,
.calculator-deck fieldset > #main,
.calculator-deck fieldset > #complementary,
.calculator-deck fieldset > #inverted {
    --color-calc-border: var(--calc-card-border, var(--bs-border-color, #dadbdd));
    --color-calc-muted: var(--calc-muted-text, var(--bs-secondary-color, #6c757d));
}

.calculator-deck form#main {
    display: block;
}

.calculator-deck fieldset > #main {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: stretch;
}

.calculator-deck fieldset > #complementary,
.calculator-deck fieldset > #inverted {
    display: grid;
    grid-template-columns: minmax(10rem, 1.2fr) repeat(4, minmax(8rem, 1fr));
    gap: 0.75rem 1rem;
    align-items: stretch;
}

.calculator-deck fieldset > #main > .calcfield,
.calculator-deck fieldset > #complementary > .calcfield,
.calculator-deck fieldset > #inverted > .calcfield {
    min-width: 0;
}

.calculator-deck fieldset > #main > .calcfield:has(#main_preview),
.calculator-deck fieldset > #main > .calcfield:has(#hex) {
    grid-column: span 3;
}

.calculator-deck fieldset > #main > .calcfield:has(#red),
.calculator-deck fieldset > #main > .calcfield:has(#green),
.calculator-deck fieldset > #main > .calcfield:has(#blue),
.calculator-deck fieldset > #main > .calcfield:has(#hsl_hue),
.calculator-deck fieldset > #main > .calcfield:has(#hsl_saturation),
.calculator-deck fieldset > #main > .calcfield:has(#lightness),
.calculator-deck fieldset > #main > .calcfield:has(#hsv_hue),
.calculator-deck fieldset > #main > .calcfield:has(#hsv_saturation),
.calculator-deck fieldset > #main > .calcfield:has(#value) {
    grid-column: span 2;
}

.calculator-deck fieldset > #complementary > .calcfield,
.calculator-deck fieldset > #inverted > .calcfield {
    grid-column: span 1;
}

.calculator-deck fieldset > #main .fieldwrp,
.calculator-deck fieldset > #complementary .fieldwrp,
.calculator-deck fieldset > #inverted .fieldwrp {
    width: 100%;
}

.calculator-deck fieldset > #main .mlfield,
.calculator-deck fieldset > #complementary .mlfield,
.calculator-deck fieldset > #inverted .mlfield {
    width: 100%;
    box-sizing: border-box;
}

.calculator-deck #buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.calculator-deck #main_preview,
.calculator-deck #complementary_preview,
.calculator-deck #inverted_preview {
    min-height: 3.5rem;
    border: 0.15rem solid var(--color-calc-border);
    border-radius: 0.5rem;
    font-weight: 700;
    text-align: center;
    cursor: default;
}

.calculator-deck #main_preview {
    min-height: 4rem;
}

.calculator-deck #main_preview:focus,
.calculator-deck #complementary_preview:focus,
.calculator-deck #inverted_preview:focus {
    outline: none;
}

.calculator-deck [data-color-preview]:disabled,
.calculator-deck [data-color-output]:disabled {
    opacity: 1;
    cursor: default;
    -webkit-text-fill-color: currentColor;
}

.calculator-deck .color-calc-invalid {
    border-color: var(--bs-danger, #dc3545) !important;
}

.calculator-deck .color-calc-invalid-message {
    color: var(--bs-danger, #dc3545);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

@media (max-width: 56rem) {
    .calculator-deck fieldset > #main,
    .calculator-deck fieldset > #complementary,
    .calculator-deck fieldset > #inverted {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calculator-deck fieldset > #main > .calcfield:has(#main_preview),
    .calculator-deck fieldset > #main > .calcfield:has(#hex),
    .calculator-deck fieldset > #main > .calcfield:has(#red),
    .calculator-deck fieldset > #main > .calcfield:has(#green),
    .calculator-deck fieldset > #main > .calcfield:has(#blue),
    .calculator-deck fieldset > #main > .calcfield:has(#hsl_hue),
    .calculator-deck fieldset > #main > .calcfield:has(#hsl_saturation),
    .calculator-deck fieldset > #main > .calcfield:has(#lightness),
    .calculator-deck fieldset > #main > .calcfield:has(#hsv_hue),
    .calculator-deck fieldset > #main > .calcfield:has(#hsv_saturation),
    .calculator-deck fieldset > #main > .calcfield:has(#value),
    .calculator-deck fieldset > #complementary > .calcfield,
    .calculator-deck fieldset > #inverted > .calcfield {
        grid-column: span 1;
    }
}

@media (max-width: 34rem) {
    .calculator-deck fieldset > #main,
    .calculator-deck fieldset > #complementary,
    .calculator-deck fieldset > #inverted {
        grid-template-columns: 1fr;
    }
}