/**
 * 202407
 * dev.accordion
 */
:root {
  --accordion-gap: 0rem;
  --accordion-item-border-width: 1px;
  --accordion-item-border-color: var(--color-background-key-primary-90, hotpink);
  --accordion-item-border-radius: var(--shape-corner-small);
  --accordion-item-padding: 0.65rem 1.35rem;
  --accordion-label-font-size: var(--font-size-big);
  --accordion-label-font-family: var(--font-family-regular);
  --accordion-label-color: var(--color-on-background-light-primary, hotpink);
  --accordion-label-color-hover: var(--color-key-primary, hotpink);
  --accordion-label-line-height: var(--text-line-height-default, 1);
  --accordion-icon-border: 3px;
  --accordion-icon-color: var(--color-on-background-light-variant-10, hotpink);
  --accordion-icon-width: 0.65rem;
  --accordion-icon-height: var(--accordion-icon-width);
  --accordion-icon-translate-y: -50%;
  --accordion-icon-offset-top: 3px;
  --accordion-panel-content-pt: 1rem;
  --accordion-panel-content-pb: 1rem;
  --accordion-panel-content-font-size: var(--font-size-body-large);
}

.accordion {
  display: flex;
  gap: var(--accordion-gap);
  flex-direction: column;
}
.accordion .accordion-item {
  border: var(--accordion-item-border-width) solid var(--accordion-item-border-color);
  padding: var(--accordion-item-padding);
  border-radius: var(--accordion-item-border-radius);
}
.accordion .accordion-item[aria-expanded=true] > .accordion-label {
  font-family: var(--font-family-plain-bold);
}
.accordion .accordion-item[aria-expanded=true] > .accordion-label h4 {
  font-family: var(--font-family-plain-bold);
}
.accordion .accordion-item[aria-expanded=true] > .accordion-label .accordion-icon-wrapper .accordion-icon {
  transform: translateX(50%) translateY(calc(var(--accordion-icon-translate-y) * 0)) rotate(-135deg);
}
.accordion .accordion-item[aria-expanded=true] > .accordion-label .accordion-icon-wrapper .accordion-icon__open-up {
  transform: translateX(50%) translateY(var(--accordion-icon-translate-y, -60%)) rotate(45deg);
}
.accordion .accordion-item[aria-expanded=true] > .accordion-label .accordion-icon {
  transform: translateY(calc(var(--accordion-icon-translate-y) * 0)) rotate(-135deg);
}
.accordion .accordion-item[aria-expanded=true] > .accordion-label .accordion-icon__open-up {
  transform: translateY(var(--accordion-icon-translate-y, -60%)) rotate(45deg);
}
.accordion .accordion-item .accordion-label {
  position: relative;
  display: flex;
  place-items: center;
  justify-content: space-between;
  gap: 1rem;
  line-height: var(--accordion-label-line-height);
  color: var(--accordion-label-color);
  hyphens: auto;
}
.accordion .accordion-item .accordion-label__sticky {
  position: sticky;
  top: 5rem;
  background: #f6f6f6;
  padding-top: 1rem;
  padding-bottom: 1rem;
  z-index: 2;
}
.accordion .accordion-item .accordion-label--shrink {
  width: fit-content;
}
.accordion .accordion-item .accordion-label span,
.accordion .accordion-item .accordion-label h3,
.accordion .accordion-item .accordion-label h4 {
  margin: unset;
  font-family: var(--accordion-label-font-family);
  font-size: var(--accordion-label-font-size);
  hyphens: auto;
}
.accordion .accordion-item .accordion-label .accordion-icon-wrapper {
  position: relative;
  display: flex;
  width: calc(1rem * var(--text-line-height-default));
  height: calc(1rem * var(--text-line-height-default));
}
.accordion .accordion-item .accordion-label .accordion-icon-wrapper .accordion-icon {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateX(50%) translateY(var(--accordion-icon-translate-y, -60%)) rotate(45deg);
  margin-right: 0;
}
.accordion .accordion-item .accordion-label .accordion-icon-wrapper .accordion-icon__open-up {
  transform: translateX(50%) translateY(calc(var(--accordion-icon-translate-y) * 0)) rotate(-135deg);
}
.accordion .accordion-item .accordion-label .accordion-icon {
  position: relative;
  top: var(--accordion-icon-offset-top);
  right: calc(-1 * var(--accordion-icon-width, 0.75rem) * 1.5);
  transform: translateY(var(--accordion-icon-translate-y, -60%)) rotate(45deg);
  border-width: 0 var(--accordion-icon-border, 2px) var(--accordion-icon-border, 2px) 0;
  border-style: solid;
  border-color: var(--accordion-icon-color);
  width: var(--accordion-icon-width, 0.75rem);
  min-width: var(--accordion-icon-width, 0.75rem);
  height: var(--accordion-icon-height, 0.75rem);
  margin-right: calc(var(--accordion-icon-width, 0.75rem) * 2);
  cursor: pointer;
  transition: var(--transition-default) transform;
}
.accordion .accordion-item .accordion-label .accordion-icon:hover {
  border-color: var(--color-secondary);
}
.accordion .accordion-item .accordion-label .accordion-icon__open-up {
  transform: translateY(calc(var(--accordion-icon-translate-y) * 0)) rotate(-135deg);
}
.accordion .accordion-item [aria-accordion-trigger]:hover {
  color: var(--accordion-label-color-hover);
  border-color: var(--accordion-label-color-hover);
  transition: var(--transition-fast);
}
.accordion .accordion-item [aria-accordion-trigger]:hover span,
.accordion .accordion-item [aria-accordion-trigger]:hover h3,
.accordion .accordion-item [aria-accordion-trigger]:hover h4 {
  color: var(--accordion-label-color-hover);
  border-color: var(--accordion-label-color-hover);
  transition: var(--transition-fast);
}
.accordion .accordion-panel {
  transition: var(--transition-slow) max-height, var(--transition-time-slow) 0.2s opacity;
  overflow: hidden;
  max-height: 0;
}
.accordion .accordion-panel-content {
  padding-top: var(--accordion-panel-content-pt, 0.5rem);
  padding-bottom: var(--accordion-panel-content-pb, 1rem);
  font-size: var(--accordion-panel-content-font-size);
}