:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }/** Typography */
:host {
  /**
  * @prop --padding - padding around trigger and content. Defaults to var(--nano-spacing-md)
  * @prop --btn-padding - padding around trigger. Defaults to var(--padding)
  * @prop --btn-bg-color - background color of trigger. Defaults to transparent
  * @prop --btn-bg-color--hover - background color of trigger on hover. Defaults to var(--nano-color-primary-100)
  * @prop --btn-bg-color--active - background color of trigger on active. Defaults to var(--nano-color-primary-300)
  * @prop --content-padding - padding around the content. Defaults to var(--padding
  */
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-decoration: inherit;
  text-overflow: inherit;
  text-transform: inherit;
  text-align: inherit;
  white-space: inherit;
  color: inherit;
  --padding: var(--nano-spacing-md);
  --btn-padding: var(--padding);
  --btn-bg-color: transparent;
  --btn-bg-color--hover: var(--nano-color-primary-100);
  --btn-bg-color--active: var(--nano-color-primary-300);
  --content-padding: var(--padding);
  display: block;
  border: 1px solid var(--nano-color-neutral-300);
  color: var(--nano-color-neutral-1400);
}

:host([size=small]) {
  --padding: var(--nano-spacing-sm) 0.9375rem;
}

:host([size=large]) {
  --padding: var(--nano-spacing-l);
}
:host([size=large]) .header {
  font-weight: var(--nano-font-weight-normal);
  font-size: var(--nano-font-size-lg);
  line-height: var(--nano-line-height-dense);
  text-wrap: balance;
}

:host([disabled]) {
  opacity: 0.5;
}

.header {
  all: unset;
  cursor: pointer;
  padding: var(--btn-padding);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--btn-bg-color);
  color: inherit;
  font-weight: var(--nano-font-weight-normal);
  font-size: var(--nano-font-size-md);
  line-height: var(--nano-line-height-dense);
  text-wrap: balance;
}
.header::-webkit-details-marker {
  display: none;
}
.header:focus {
  outline: none;
}
.header:not([aria-disabled=true]):focus-visible {
  outline: var(--nano-focus-ring);
  outline-offset: var(--nano-focus-ring-offset);
}
.header:not([aria-disabled=true]):hover {
  background: var(--btn-bg-color--hover);
}
.header:not([aria-disabled=true]):active {
  background: var(--btn-bg-color--active);
}
.disabled .header {
  cursor: not-allowed;
}
.header .label {
  inline-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  flex: 1;
  display: inline-block;
}
.header .icon {
  line-height: 0;
  flex-direction: column;
  justify-content: center;
  display: inline-block;
  color: var(--nano-color-primary-1200);
}
.header .icon .default-icon {
  rotate: 0deg;
  transform-origin: center;
  transition: var(--nano-transition-x-fast) ease rotate;
}
:host([open]) .header .icon .default-icon {
  rotate: 180deg;
}
.header .icon--start {
  margin-inline: 0 var(--btn-padding);
  margin-block: 0;
}
.header .icon--end {
  margin-inline: var(--btn-padding) 0;
  margin-block: 0;
}
.header .icon ::slotted(.nano-icon), .header .icon::slotted(.nano-icon) {
  color: currentcolor;
  transition: var(--nano-transition-x-fast) ease rotate;
  transform-origin: center;
}

.body {
  display: grid;
  grid-template-rows: 0fr;
  transition: all var(--nano-transition-fast) ease-out;
  opacity: 0;
}
:host([open]) .body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.content-wrapper {
  overflow: hidden;
}

.content {
  padding: var(--content-padding);
}