/* #region "../src/elements/accordion/accordion.scss" */
/*
- type: css
*/
/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.accordion-wrapper {
  container: accordion/inline-size;
}

.accordion-group {
  font-family: var(--base-font-family);
  line-height: var(--base-line-height);
  font-size: var(--base-font-size);
  display: flex;
  flex-direction: column;
  gap: /* grow(15, 20) */ clamp(0.9375rem, 0.8333333333rem + 0.462962963vw, 1.25rem);
}

.accordion .accordion-heading {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  font: inherit;
  line-height: 1;
  letter-spacing: inherit;
  word-spacing: inherit;
  white-space: nowrap;
  background: none;
  color: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: /* grow(10, 20) */ clamp(0.625rem, 0.4166666667rem + 0.9259259259vw, 1.25rem);
  width: 100%;
  cursor: pointer;
  white-space: normal;
  font-size: /* grow(22, 26) */ clamp(1.375rem, 1.2916666667rem + 0.3703703704vw, 1.625rem);
  line-height: 1.2;
  font-weight: 700;
  font-family: var(--heading-font-family);
  letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .accordion .accordion-heading {
    letter-spacing: 0.015em;
  }
}
@media (min-width: 992px) {
  .accordion .accordion-heading {
    letter-spacing: 0.02em;
  }
}
:root.no-focus-visible .accordion .accordion-heading:focus {
  outline: 2px solid var(--focus-color, var(--black));
  outline-offset: var(--focus-offset, 3px);
}

.accordion .accordion-heading:focus:not(:focus-visible) {
  outline: none;
}
.accordion .accordion-heading:focus-visible {
  outline: 2px solid var(--focus-color, var(--black));
  outline-offset: var(--focus-offset, 3px);
}
.accordion .accordion-inner {
  padding-block: 1rem;
  display: none;
}
.accordion .accordion-inner > :first-child {
  margin-top: 0;
}
.accordion .accordion-inner > :last-child {
  margin-bottom: 0;
}
@media print {
  .accordion .accordion-inner {
    display: block !important;
  }
}
.accordion:last-child {
  margin-bottom: 1em;
}
.accordion .toggle-icon {
  color: var(--icon);
  transform-origin: center calc(50% - 2px);
}
@media print {
  .accordion .toggle-icon {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .accordion .toggle-icon {
    transition: transform 300ms;
  }
}
.accordion.accordion-open .accordion-heading .toggle-icon {
  transform: rotate(180deg);
}
/* #endregion "../src/elements/accordion/accordion.scss" */

head{--webpack--css-wpce--accordion:&\.\.\/src\/elements\/accordion\/accordion\.scss;}
/*# sourceMappingURL=css-wpce--accordion.css.map*/