ion-accordion {
    > [slot="header"] .ion-accordion-toggle-icon[slot="start"] {
        @include margin-horizontal(null, var(--mdl-spacing-2));
        background-color: var(--gray-100);
        border-radius: 50%;
        padding: var(--mdl-spacing-1);
    }

    /**
    * Change arrow direction to match LMS: expanded is down, collapsed is right.
    */
    &.accordion-expanding > [slot="header"] .ion-accordion-toggle-icon,
    &.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon {
        transform: none;
    }

    &.accordion-collapsing > [slot="header"] .ion-accordion-toggle-icon,
    &.accordion-collapsed > [slot="header"] .ion-accordion-toggle-icon {
        transform: rotate(-90deg);
        @include rtl() {
            transform: rotate(90deg);
        }
    }
}

:root.dark {
    ion-accordion {
        > [slot="header"] .ion-accordion-toggle-icon[slot="start"] {
            background-color: var(--gray-800);
        }
    }
}