:host {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  --wcs-accordion-panel-color-default: var(--wcs-semantic-color-text-primary);
  --wcs-accordion-panel-color-highlight: var(--wcs-semantic-color-text-primary);
  --wcs-accordion-panel-color-hover: var(--wcs-semantic-color-text-primary);
  --wcs-accordion-panel-color-press: var(--wcs-semantic-color-text-primary);
  --wcs-accordion-panel-action-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);
  --wcs-accordion-panel-action-color-highlight: var(--wcs-semantic-color-foreground-action-secondary-press);
  --wcs-accordion-panel-action-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);
  --wcs-accordion-panel-action-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);
  --wcs-accordion-panel-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);
  --wcs-accordion-panel-background-color-highlight: var(--wcs-semantic-color-background-action-secondary-press);
  --wcs-accordion-panel-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);
  --wcs-accordion-panel-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);
  --wcs-accordion-panel-header-font-weight: var(--wcs-semantic-font-weight-medium);
  --wcs-accordion-panel-header-font-size: var(--wcs-semantic-font-size-heading-6);
  --wcs-accordion-panel-header-gap: calc(3 * var(--wcs-semantic-spacing-base));
  --wcs-accordion-panel-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-accordion-panel-border-radius-open: var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius) 0 0;
  --wcs-accordion-panel-padding-vertical: var(--wcs-semantic-spacing-large);
  --wcs-accordion-panel-padding-horizontal: calc(var(--wcs-semantic-spacing-base) * 3);
  --wcs-accordion-panel-header-border-width: var(--wcs-semantic-border-width-default);
  --wcs-accordion-panel-border-width: var(--wcs-semantic-border-width-default);
  --wcs-accordion-panel-border-width-focus: var(--wcs-semantic-border-width-large);
  --wcs-accordion-panel-border-color: var(--wcs-semantic-color-border-secondary);
  --wcs-accordion-panel-border-color-focus: var(--wcs-semantic-color-border-focus-base);
  --wcs-accordion-panel-border-style-focus: var(--wcs-semantic-border-style-focus-base);
  --wcs-accordion-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);
  border: var(--wcs-accordion-panel-border-width) solid var(--wcs-accordion-panel-border-color);
  border-radius: var(--wcs-accordion-panel-border-radius);
}
:host .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wcs-accordion-panel-header-gap);
  padding: var(--wcs-accordion-panel-padding-vertical) var(--wcs-accordion-panel-padding-horizontal);
  border-radius: var(--wcs-accordion-panel-border-radius);
  font-weight: var(--wcs-accordion-panel-header-font-weight);
  font-size: var(--wcs-accordion-panel-header-font-size);
  font-family: var(--wcs-font-sans-serif);
  color: var(--wcs-accordion-panel-color-default);
  background-color: var(--wcs-accordion-panel-background-color-default);
  border: none;
  transition: background-color var(--wcs-accordion-transition-duration);
}
@media (forced-colors: active) {
  :host .header {
    border: var(--wcs-accordion-panel-header-border-width) solid ButtonBorder;
  }
}
:host .header:focus-visible {
  outline: var(--wcs-accordion-panel-border-width-focus) var(--wcs-accordion-panel-border-style-focus) var(--wcs-accordion-panel-border-color-focus);
}
:host .header:hover {
  cursor: pointer;
  color: var(--wcs-accordion-panel-color-hover);
  background-color: var(--wcs-accordion-panel-background-color-hover);
}
:host .header:hover .header-action {
  color: var(--wcs-accordion-panel-action-color-hover);
}
:host .header:hover .header-action .arrow {
  fill: var(--wcs-accordion-panel-action-color-hover);
}
:host .header:active {
  background-color: var(--wcs-accordion-panel-background-color-press);
}
:host .header-action {
  display: flex;
  align-items: center;
  user-select: none;
  color: var(--wcs-accordion-panel-action-color-default);
}
:host .header-action .arrow {
  fill: var(--wcs-accordion-panel-action-color-default);
}
:host .content {
  display: none;
}

:host([open]) {
  margin-bottom: 0;
  /* FIXME GroupContentWithHeader is deprecated. Remove this.
  &:host([group-content-with-header]) {
      .header {
          border-radius: var(--wcs-accordion-panel-border-radius-open);
          padding-bottom: 0;
      }

      .content {
          border-radius: 0 0 var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius);
          margin-bottom: var(--wcs-);
          background-color: var(--wcs-accordion-panel-background-color-default);
      }
  }
  */
}
:host([open]) .header {
  border-radius: var(--wcs-accordion-panel-border-radius-open);
}
:host([open]) .content {
  display: block;
}
:host([open]):host([highlight]) {
  /* FIXME GroupContentWithHeader is deprecated. Remove this.
  &:host([group-content-with-header]) {
      .content {
          background-color: var(--wcs-accordion-panel-background-color-highlight);
          color: var(--wcs-accordion-panel-color-highlight);
      }
  }
  */
}
:host([open]):host([highlight]) .header {
  background-color: var(--wcs-accordion-panel-background-color-highlight);
  color: var(--wcs-accordion-panel-color-highlight);
}
:host([open]):host([highlight]) .header-action {
  color: var(--wcs-accordion-panel-action-color-highlight);
}
:host([open]):host([highlight]) .header-action .arrow {
  fill: var(--wcs-accordion-panel-action-color-highlight);
}