@utrecht/components/accordion/dist/index.css

Components for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2022 Gemeente Utrecht
 * Copyright (c) 2020-2022 Frameless B.V.
 */
/* stylelint-disable-next-line block-no-empty */
.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 {
  break-inside: avoid;
}

.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-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--utrecht[aria-expanded]::after {
  background-color: var(--utrecht-accordion-button-icon-utrecht-background-color);
  background-position: center;
  background-repeat: no-repeat;
  block-size: var(--utrecht-accordion-button-icon-size);
  content: "";
  inline-size: var(--utrecht-accordion-button-icon-size);
  inset-block-start: 0;
  inset-inline-end: 0;
  position: absolute;
}
.utrecht-accordion__button--utrecht[aria-expanded=false]::after {
  background-image: var(--utrecht-accordion-icon-utrecht-arrow-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E"));
}
.utrecht-accordion__button--utrecht[aria-expanded=true]::after {
  background-image: var(--utrecht-accordion-icon-utrecht-arrow-up, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E"));
  background-position: center;
  background-repeat: no-repeat;
  content: "";
}

.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 {
  margin-block-end: 0;
  margin-block-start: 0;
}