/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-accordion {
  display: grid;
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-start, 0));
  row-gap: var(--utrecht-accordion-row-gap);
}

.utrecht-accordion__section {
  border-block-start-color: var(--utrecht-accordion-section-border-color, currentColor);
  border-block-start-style: solid;
  border-block-start-width: var(--utrecht-accordion-section-border-width, 0);
  break-inside: avoid;
}
.utrecht-accordion__section:is(:last-child, :only-child) {
  border-block-end-color: var(--utrecht-accordion-section-border-color, currentColor);
  border-block-end-style: solid;
  border-block-end-width: var(--utrecht-accordion-section-border-width, 0);
}
.utrecht-accordion__section:not(:last-child) {
  border-block-end-color: transparent;
}
.utrecht-accordion__section:hover {
  --utrecht-accordion-section-border-color: var(--utrecht-accordion-section-hover-border-color, currentColor);
}

.utrecht-accordion__button {
  --utrecht-button-focus-scale: 1;
  --utrecht-button-hover-scale: 1;
  --utrecht-button-inline-size: 100%;
  --utrecht-button-min-inline-size: 100%;
  --utrecht-button-subtle-background-color: var(--utrecht-accordion-button-background-color);
  --utrecht-button-subtle-padding-inline-start: var(--utrecht-accordion-button-padding-inline-start);
  --utrecht-button-subtle-padding-inline-end: var(--utrecht-accordion-button-padding-inline-end);
  --utrecht-button-subtle-padding-block-start: var(--utrecht-accordion-button-padding-block-start);
  --utrecht-button-subtle-padding-block-end: var(--utrecht-accordion-button-padding-block-end);
  --utrecht-button-padding-block-start: var(--utrecht-accordion-button-padding-block-start);
  --utrecht-button-padding-block-end: var(--utrecht-accordion-button-padding-block-end);
  --utrecht-button-subtle-color: var(--utrecht-accordion-button-color);
  --utrecht-button-subtle-hover-background-color: var(--utrecht-accordion-button-hover-background-color);
  --utrecht-button-subtle-hover-border-color: var(--utrecht-accordion-button-hover-border-color);
  --utrecht-button-subtle-hover-color: var(--utrecht-accordion-button-hover-color);
  --utrecht-button-subtle-active-background-color: var(--utrecht-accordion-button-active-background-color);
  --utrecht-button-subtle-active-border-color: var(--utrecht-accordion-button-active-border-color);
  --utrecht-button-subtle-active-color: var(--utrecht-accordion-button-active-color);
  --utrecht-button-subtle-focus-background-color: var(--utrecht-accordion-button-focus-background-color);
  --utrecht-button-subtle-focus-border-color: var(--utrecht-accordion-button-focus-border-color);
  --utrecht-button-subtle-focus-color: var(--utrecht-accordion-button-focus-color);
  --utrecht-button-subtle-border-color: var(--utrecht-accordion-button-border-color);
  --utrecht-button-subtle-border-width: var(--utrecht-accordion-button-border-width);
  --utrecht-button-icon-gap: var(--utrecht-accordion-button-gap, var(--utrecht-space-text-xs));
  align-items: baseline;
  justify-content: start !important;
  position: relative;
  text-align: start;
}
.utrecht-accordion__button:focus-visible {
  --utrecht-accordion-button-background-color: var(--utrecht-accordion-button-focus-visible-background-color);
  --utrecht-accordion-button-color: var(--utrecht-accordion-button-focus-visible-color);
  --utrecht-button-subtle-border-color: var(--utrecht-accordion-button-focus-visible-border-color);
  --utrecht-button-subtle-border-width: var(--utrecht-accordion-button-focus-visible-border-width);
}

.utrecht-accordion__button-icon {
  display: flex;
}
.utrecht-accordion__button[aria-expanded=true] .utrecht-accordion__button-icon {
  transform: rotate(180deg);
}

.utrecht-accordion__panel {
  border-block-start: none;
  border-color: var(--utrecht-accordion-panel-border-color);
  border-style: solid;
  border-width: var(--utrecht-accordion-panel-border-width);
  padding-block-end: var(--utrecht-accordion-panel-padding-block-end);
  padding-block-start: var(--utrecht-accordion-panel-padding-block-start);
  padding-inline-end: var(--utrecht-accordion-panel-padding-inline-end);
  padding-inline-start: var(--utrecht-accordion-panel-padding-inline-start);
}

.utrecht-accordion__header {
  align-items: center;
  display: flex;
  margin-block-end: 0;
  margin-block-start: 0;
}