:host([theme="dark"]) {
    --marker-color: var(--pf-global--Color--300);
    --marker-color-hover: var(--pf-global--Color--200);

    details {
        @media (prefers-contrast: more) {
            background: var(--pf-global--BackgroundColor--150);
        }
    }
}

details {
    @media (prefers-contrast: more) {
        border: 1px solid var(--pf-global--BorderColor--200);
        background: var(--pf-global--BackgroundColor--150);
    }

    &::details-content {
        padding-inline-start: var(--pf-c-form__field-group--GridTemplateColumns--toggle);
        padding-inline-end: var(--pf-global--spacer--md);
        padding-block-end: var(--pf-global--spacer--sm);
    }

    & > summary {
        list-style-position: outside;
        margin-inline-start: 2em;
        padding-inline-start: calc(var(--pf-global--spacer--md) + 0.25rem);
        padding-block: var(--pf-global--spacer--sm);
        padding-inline: var(--pf-global--spacer--md);
        list-style-type: "\f105";
        cursor: pointer;
        user-select: none;

        font-weight: bold;

        @media (prefers-contrast: more) {
            text-decoration: underline;
        }

        &::marker {
            color: var(--marker-color, var(--pf-global--Color--200));
            transition: var(--pf-c-form__field-group-toggle-icon--Transition);
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
        }

        &:hover::marker {
            color: var(--marker-color-hover, var(--pf-global--Color--100));
        }
    }

    &:not([open]) summary {
        padding-block: var(--pf-global--spacer--xs);
    }

    &[open] summary {
        list-style-type: "\f107";
    }
}

.pf-c-form__field-group-header-description {
    text-wrap: balance;
}
