@layer component {
  .miz-accordion {
    --accordion-button-padding: 1rem;
    --accordion-button-background-color: #e5e5e5;
    --accordion-button-border-bottom-width: 2px;
    --accordion-button-border-bottom-style: solid;
    --accordion-button-border-bottom-color: rgb(212, 212, 212);
    --accordion-button-font-color: rgb(0, 0, 0);
    --accordion-button-font-size: medium;
    --accordion-button-font-weight: 600;
    --accordion-panel-background-color: transparent;
    --accordion-panel-font-color: rgb(0, 0, 0);
    display: flex;
    flex-direction: column;
    background-color: var(--accordion-panel-background-color);
  }
}
@layer component {
  .miz-accordion__button {
    --button-padding: var(--accordion-button-padding);
    --button-background-color: var(--accordion-button-background-color);
    --button-font-color: var(--accordion-button-font-color);
    --button-border-style: none;
    --button-border-radius: 0;
    --button-font-size: var(--accordion-button-font-size);
    --button-font-weight: var(--accordion-button-font-weight);
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    border-bottom: var(--accordion-button-border-bottom-width) var(--accordion-button-border-bottom-style) var(--accordion-button-border-bottom-color);
    text-align: start;
  }
  .miz-accordion__button[aria-expanded=true] {
    --button-background-color: rgb(212, 212, 212);
  }
  .miz-accordion__button:hover {
    --button-background-color: rgb(212, 212, 212);
  }
  .miz-accordion__button:focus-visible {
    --button-background-color: rgb(212, 212, 212);
  }
  .miz-accordion__button > * {
    flex-grow: 1;
  }
}
@layer component {
  .miz-accordion__button-icon {
    flex-grow: 0;
    margin-right: -6px;
    transition: transform 100ms;
  }
  .miz-accordion__button[aria-expanded=true] .miz-accordion__button-icon {
    transform: rotate(180deg);
  }
}
@layer component {
  .miz-accordion__panel {
    --panel-font-color: var(--accordion-panel-font-color);
    overflow: hidden;
    color: var(--panel-font-color);
  }
  .miz-accordion__panel a:-webkit-any-link {
    color: var(--panel-font-color);
  }
  .miz-accordion__panel a:any-link {
    color: var(--panel-font-color);
  }
  .miz-accordion__panel.expand {
    height: auto;
  }
}
.miz-accordion--dark {
  --accordion-button-background-color: rgb(0, 0, 0);
  --accordion-button-border-bottom-color: rgb(152, 152, 152);
  --accordion-button-font-color: rgb(255, 255, 255);
  --accordion-panel-background-color: rgb(0, 0, 0);
  --accordion-panel-font-color: rgb(255, 255, 255);
}
.miz-accordion--dark .miz-accordion__button[aria-expanded=true] {
  --button-background-color: rgb(51, 51, 51);
}
.miz-accordion--dark .miz-accordion__button:hover {
  --button-background-color: rgb(51, 51, 51);
}
.miz-accordion--dark .miz-accordion__button:focus-visible {
  --button-background-color: rgb(51, 51, 51);
}

.miz-accordion--compact {
  --accordion-button-padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  --accordion-button-font-size: 0.833rem;
}