:is(h1, h2, h3, h4, h5, p):has(+ .ow-accordion) {
  margin-bottom: var(--spacing-100, 8px);
}

.ow-accordion .panel-group {
  margin-bottom: 0;

  &:not(:last-child) {
    margin-bottom: var(--spacing-300, 24px);
  }
}

.ow-accordion .panel {
  margin: 0;
  border: 1px solid var(--grey-500, #c6c6c6);
  box-shadow: none;
}

.ow-accordion .panel-group .panel + .panel {
  margin-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.ow-accordion .panel:not(:last-of-type) {
  border-bottom: none;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.ow-accordion .panel:has(> * > .panel-title > a:focus-visible) {
  outline: 2px dashed var(--brand-primary-500, #001080);
  outline-offset: 0px;
}

.ow-accordion .panel-title > a:focus-visible {
  outline: none;
}

/* ACCORDION > HEADING */
.ow-accordion .panel-heading {
  padding: 0;
}

.ow-accordion .panel-title > a {
  --panel-padding: var(--spacing-200, 16px);
  --icon-diameter: 40px;
  margin-bottom: 0;
  padding: var(--panel-padding);
  padding-right: calc((var(--panel-padding) * 2) + var(--icon-diameter));
  font: var(--h3-font);
}

.ow-accordion .panel-title > a:hover {
  background: var(--brand-primary-100, #e0e2f0);
  color: inherit;
}

/* Should icon sit center of total header or inline with first row? */
.ow-accordion .ow-toggle {
  right: var(--panel-padding);
  width: var(--icon-diameter);
  height: var(--icon-diameter);
  margin: calc((var(--icon-diameter) / 2) * -1) 0 0;
  border-radius: 100%;
  color: var(--grey-900, #252525);
}

.ow-accordion.ow-accordion--highlighted .ow-toggle {
  background: var(--brand-primary-100, #e0e2f0);
}

.ow-accordion .panel-title > a:hover .ow-toggle,
.ow-accordion .ow-toggle:hover {
  background: var(--white, #fff);
  color: var(--grey-900, #252525);
}

.ow-accordion .ow-toggle svg {
  fill: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  background-position: center;
  background-repeat: no-repeat;
}

.ow-accordion .ow-toggle svg.ow-toggle__expand {
  background-image: url("data:image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16.5002L4.5 9.00019L5.55 7.9502L12 14.4002L18.45 7.9502L19.5 9.00019L12 16.5002Z' fill='%23252525'/%3E%3C/svg%3E%0A");
}

.ow-accordion .ow-toggle svg.ow-toggle__collapse {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7.5L19.5 15L18.45 16.05L12 9.6L5.55 16.05L4.5 15L12 7.5Z' fill='%23252525'/%3E%3C/svg%3E%0A");
}

/* ACCORDION > BODY */
.ow-accordion .panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top: none;
}

.ow-accordion .panel-body > :last-child {
  margin-bottom: 0;
}
/* END BODY */