@layer components {
    expansion-panels {
        display: grid;
        gap: var(--size-3);

        :is(details) {
            border: 1px solid var(--color-border-grey);

            & .expansion-summary {

                &::marker {
                    display: none;
                    background: none;
                    list-style-image: none;
                    color: transparent;
                }
            }

            :is(summary) {
                padding: var(--size-6) var(--size-3);
                display: grid;
                grid-template-areas: "title-prepend-slot title icon";
                grid-template-columns: min-content 1fr min-content;
                grid-template-rows: auto;
                gap: var(--size-2);
                cursor: pointer;

                & .title-prepend {
                    grid-area: title-prepend-slot;
                }

                & .expansion-panel-title {
                    grid-area: title;
                    font-weight: var(--font-weight-7);
                }

                & .expansion-panel-icon {
                    grid-area: icon;

                    & .open-icon {
                        display: none;
                    }

                    & .closed-icon {
                      display: block;
                    }

                }
            }

            & .expansion-details {
                display: grid;
                grid-template-areas: "details-prepend-slot details-text";
                grid-template-columns: min-content 1fr;
                grid-template-rows: auto;
                gap: var(--size-2);
                padding: 0 var(--size-3) var(--size-6) var(--size-3);

                & .text-prepend {
                    grid-area: details-prepend-slot;
                }

                & .details-text {
                    grid-area: details-text;
                }
            }

            &[open] {

                :is(summary) {
                  & .open-icon {
                      display: block;
                  }

                  & .closed-icon {
                    display: none;
                }
              }
            }
        }
    }
}