[data-component="accordion"], .accordion-component {
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
  border: 1px solid var(--_site-theme---accordion--border);
  border-radius: var(--accordion--border-radius);
  background-color: var(--_site-theme---accordion--background);

  [data-accordion="trigger"], .accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    overflow: hidden;
    padding: var(--accordion--padding);
    border-bottom: 1px #000;
    border-radius: var(--accordion--border-radius);
    color: var(--_site-theme---accordion--button-text);
    background-color: var(--_site-theme---accordion--background);
    text-decoration: none;
    cursor: pointer;
    transition: color .3s cubic-bezier(.165, .84, .44, 1);

    &:hover {
      color: var(--_site-theme---accordion--button-text-hover);
    }

    &:focus-visible, &[data-wf-focus-visible] {
      outline: 2px solid var(--_site-theme---focus-outline);
      outline-offset: 2px;
    }
  }

  [data-accordion="title"], .accordion-title {
    margin-bottom: 0;
    padding-right: .5em;
    color: var(--_site-theme---accordion--button-text);
    text-align: left;
    pointer-events: none;

    &:hover {
      color: red;
    }
    & * {
      margin-block-end: 0px;
    }
  }

  [data-accordion="icon"], .accordion-icon {
    flex: none;
    width: 2em;
    height: 2em;
    transition: transform .3s cubic-bezier(.165, .84, .44, 1);
  }

  [data-accordion="content"], .accordion-content {
    width: 100%;
    height: auto;
    padding-right: var(--accordion--padding);
    padding-left: var(--accordion--padding);
    overflow: hidden;
  }

  [data-accordion="content-spacer"], .accordion-content_spacer {
    padding-bottom: var(--accordion--padding);
    color: var(--_site-theme---accordion--panel-text);
  }
}

details[open] [data-accordion="icon"] {
    transform: rotate(45deg);
}
details[data-accordion-animating='closing'] > [data-accordion='content'] {
    display: block;
}