/*
* Accordion theme
*
*/
/*
 * Utilities
 */
.dnb-accordion {
  --accordion-border-width: 0;
  --accordion-border-radius: 0;
  --accordion-header-margin-vertical: 1rem;
  --accordion-header-margin-vertical--description: 0.5rem;
  --accordion-header-wrapper-margin--icon-right: calc(
    1.5rem - var(--sb-accordion-frame-width)
  );
  --sb-accordion-header-border-radius--expanded: 0.125rem 0.125rem 0 0;
  --sb-accordion-header-border-radius--hover: 0.125rem;
  --sb-accordion-header-border-radius--hover-expanded: 0.125rem 0.125rem 0
    0;
  --accordion-header-icon-gutter: 0.5rem;
  --accordion-header-icon-margin: calc(
    1.5rem - var(--sb-accordion-frame-width)
  );
  --sb-accordion-frame-color: transparent;
  --sb-accordion-frame-width: 0.1875rem;
  --sb-accordion-frame-width--active: 0rem;
  --sb-accordion-content-padding-left: calc(
    3.5rem - var(--sb-accordion-frame-width)
  );
  --sb-accordion-content-border-radius: 0 0 0.125rem 0.125rem;
  --accordion-content-margin: 0;
  --accordion-content-padding: 0 1rem 1rem
    var(--sb-accordion-content-padding-left);
  color: var(--sb-color-text);
}
.dnb-accordion__header, .dnb-accordion__content {
  background-color: var(--sb-accordion-background, transparent);
  border-left: var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color);
}
html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) {
  outline: none;
  --border-color: var(--focus-ring-color);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
  z-index: 1;
  border-radius: 0.125rem;
  background-color: var(--sb-color-blue-light-3);
  color: var(--border-color);
}
html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon {
  color: var(--border-color);
}
html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
  background-color: var(--sb-color-violet-light-2);
  border-radius: var(--sb-accordion-header-border-radius--hover);
}
.dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled] {
  cursor: not-allowed;
}
.dnb-accordion__header:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]) {
  background-color: var(--sb-color-white);
  --border-color: ;
  --border-width: 0.0625rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  --border-color: var(--sb-color-violet);
  border-left-width: var(--sb-accordion-frame-width--active);
  padding-left: calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active));
}
.dnb-accordion__header__icon, .dnb-accordion__header__container {
  color: var(--sb-color-violet);
}
.dnb-accordion__header--icon-right {
  --accordion-header-icon-margin: 1.5rem;
}
.dnb-accordion__header--icon-right + .dnb-accordion__content {
  --sb-accordion-content-padding-left: calc(
    1.5rem - var(--sb-accordion-frame-width)
  );
  --accordion-content-padding: 0 1rem 1rem
    var(--sb-accordion-content-padding-left);
}
.dnb-accordion__header[disabled] * {
  color: var(--sb-color-gray-dark-2);
}
.dnb-accordion--expanded {
  --sb-accordion-background: var(--sb-color-violet-light-4);
  --sb-accordion-frame-color: var(--sb-color-violet);
  --sb-accordion-frame-width--active: 0.125rem;
}
html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__header:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__header:hover:not([disabled]) {
  border-radius: var(--sb-accordion-header-border-radius--hover-expanded);
}
.dnb-accordion--expanded > .dnb-accordion__header--expanded {
  border-radius: var(--sb-accordion-header-border-radius--expanded);
}
.dnb-accordion--expanded > .dnb-accordion__content {
  border-radius: var(--sb-accordion-content-border-radius);
}
.dnb-accordion--expanded > .dnb-accordion__header[disabled],
.dnb-accordion--expanded > .dnb-accordion__header[disabled] + .dnb-accordion__content {
  --sb-accordion-background: var(--sb-color-gray-light-2);
  --sb-accordion-frame-color: var(--sb-color-gray-dark-2);
}