/* * X Accordion */
.x-accordion {
  --x-accordion-title-color-enabled: var(--m-color-on-body);
  --x-accordion-title-color-hovered: var(--x-accordion-title-color-enabled);
  --x-accordion-title-color-focused: var(--x-accordion-title-color-enabled);
  --x-accordion-title-background-enabled: transparent;
  --x-accordion-title-background-hovered: transparent;
  --x-accordion-title-background-focused: transparent;
  --x-accordion-title-space-y-start: 1.5rem;
  --x-accordion-title-space-y-end: 1.5rem;
  --x-accordion-title-space-x-start: 0;
  --x-accordion-title-space-x-end: 0;
  --x-accordion-title-font-size: var(--m-typography-secondary-font-size);
  --x-accordion-title-line-height: var(--m-typography-secondary-line-height);
  --x-accordion-trigger-icon-size: 1.125rem;
  --x-accordion-trigger-icon-gap: 1rem;
  --x-accordion-trigger-icon-position-y: calc(var(--x-accordion-title-space-y-start) - var(--x-accordion-trigger-icon-size) / 2 + var(--x-accordion-title-line-height) / 2);
  --x-accordion-trigger-icon-position-x: 0;
  --x-accordion-trigger-icon-color: var(--m-color-on-body-variant);
  --x-accordion-panel-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 32'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.99 20.2S1.3 19.22 1 21.57c-.3 2.35 4.8 1.27 4.47 3.84-.3 2.4-3.97 1.37-3.97 1.37M1.5 15V6a1 1 0 0 1 1-1h12l7 7v3'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14.5 5v7h7M8.5 20l2.5 7 2.5-7M20.5 24h1v2.1a2.76 2.76 0 0 1-2 .9c-1.66 0-3-1.57-3-3.5 0-1.94 1.34-3.5 3-3.5.53 0 1.05.16 1.5.46'/%3E%3C/svg%3E");
  --x-accordion-panel-icon-size: 1.75rem;
  --x-accordion-panel-icon-gap: 1rem;
  --x-accordion-panel-icon-position-y: calc(var(--x-accordion-title-space-y-start) - var(--x-accordion-panel-icon-size) / 2 + var(--x-accordion-title-line-height) / 2);
  --x-accordion-panel-icon-position-x: 0;
  --x-accordion-panel-space-y-start: 1.5rem;
  --x-accordion-panel-space-y-end: 1.5rem;
  --x-accordion-panel-space-x-start: 0;
  --x-accordion-panel-space-x-end: 0;
  --x-accordion-border-width: 0;
  --x-accordion-border-color-enabled: transparent;
  --x-accordion-border-color-hovered: transparent;
  --x-accordion-border-color-focused: transparent;
  --x-accordion-border-color-focused-hovered: transparent;
  --x-accordion-content-shift-y: calc((var(--x-accordion-title-space-y-start) + var(--x-accordion-title-font-size)) * -2);

  --x-aria-title-color-enabled: var(--m-color-on-body-variant);
  --x-aria-title-color-hovered: var(--m-color-black);
  --x-aria-title-color-focused: var(--m-color-black);
  --x-aria-background-color-enabled: hsla(var(--m-color-blue-hsl) / var(--m-level-9));
  --x-aria-background-color-hovered: hsla(var(--m-color-blue-hsl) / var(--m-level-8));
  --x-aria-background-color-focused: hsla(var(--m-color-blue-hsl) / var(--m-level-7));
  --x-aria-background-color-focused-hovered: hsla(var(--m-color-blue-hsl) / var(--m-level-6));
  --x-aria-border-width: 0.125rem;
  --x-aria-border-color-enabled: hsla(var(--m-color-blue-hsl) / var(--m-level-2));
  --x-aria-border-color-hovered: hsla(var(--m-color-blue-hsl) / var(--m-level-2));
  --x-aria-border-color-focused: hsla(var(--m-color-blue-hsl) / var(--m-level-2));

  border-bottom: var(--x-accordion-border-width) solid var(--x-accordion-border-color-enabled);
}
/* ** X Accordion: Bordered */
.x-accordion.is-bordered {
  --x-accordion-border-width: 0.125rem;
  --x-accordion-border-color-enabled: var(--m-color-body-variant-dark);
  --x-accordion-border-color-hovered: var(--m-color-body-variant-dark);
  --x-accordion-border-color-focused: var(--m-color-body-variant-dark);
}
/* ** X Accordion: Title/Trigger */
.x-accordion-title {
  font-weight: 500;
  color: var(--x-accordion-title-color-enabled);
  font-size: var(--x-accordion-title-font-size);
  line-height: var(--x-accordion-title-line-height);
  border-top: var(--x-accordion-border-width) solid var(--x-accordion-border-color-enabled);
}
.x-accordion-trigger {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding-block: var(--x-accordion-title-space-y-start) var(--x-accordion-title-space-y-end);
  padding-inline: var(--x-accordion-title-space-x-start) var(--x-accordion-title-space-x-end);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  background: none;
  color: inherit;
  outline: none;
}
.x-accordion-trigger { border-style: none; }
.x-accordion-trigger::-moz-focus-inner { border: 0; }
.x-accordion-trigger-label {
  display: block;
  padding-inline-end: calc(var(--x-accordion-trigger-icon-size) + var(--x-accordion-trigger-icon-gap));
}
.x-accordion-trigger-label::after {
  content: "";
  position: absolute;
  inset-block-start: var(--x-accordion-trigger-icon-position-y);
  inset-inline-end: var(--x-accordion-trigger-icon-position-x);
  width: var(--x-accordion-trigger-icon-size);
  aspect-ratio: 1/1;
  background-color: var(--x-accordion-trigger-icon-color);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 14'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m22.42 1.81-10 10-10-10'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
}
/* *** X Accordion: Panel icon */
.x-accordion-title.has-icon .x-accordion-trigger-label {
  padding-inline-start: calc(var(--x-accordion-panel-icon-size) + var(--x-accordion-panel-icon-gap));
}
.x-accordion-title.has-icon .x-accordion-trigger-label::before {
  content: "";
  position: absolute;
  inset-block-start: var(--x-accordion-panel-icon-position-y);
  inset-inline-start: var(--x-accordion-panel-icon-position-x);
  width: var(--x-accordion-panel-icon-size);
  aspect-ratio: 1/1;
  background-color: var(--x-accordion-title-color-enabled);
  mask-image: var(--x-accordion-panel-icon-image);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
}

/* ** X Accordion: Panel/Content */
.x-accordion-panel > .inner {
  padding-block: var(--x-accordion-panel-space-y-start) var(--x-accordion-panel-space-y-end);
  padding-inline: var(--x-accordion-panel-space-x-start) var(--x-accordion-panel-space-x-end);
}

/* ** X Accordion: Workarounds */
/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
/* .x-accordion-panel[hidden] { display: none !important; } */

/* ** X Accordion: Accessibility */
.x-accordion:focus-within { border-color: var(--x-accordion-border-color-focused); }
.x-accordion:focus-within .x-accordion-title { background-color: var(--x-accordion-background-color-enabled); }
.x-accordion-trigger:focus {
  color: var(--x-accordion-title-color-focused);
  background-color: var(--x-accordion-background-color-focused);
}
.x-accordion-trigger:hover {
  color: var(--x-accordion-title-color-hovered);
  background-color: var(--x-accordion-background-color-hovered);
}
.x-accordion-trigger:focus:hover {
  color: var(--x-accordion-title-color-focused);
  background-color: var(--x-accordion-background-color-focused-hovered);
}

/* ** X Accordion: Reduced Motion */
@media (prefers-reduced-motion) {
  .x-accordion {
    --x-accordion-title-color-enabled: var(--x-aria-title-color-enabled);
    --x-accordion-title-color-hovered: var(--x-aria-title-color-hovered);
    --x-accordion-title-color-focused: var(--x-aria-title-color-focused);
    --x-accordion-background-color-enabled: var(--x-aria-background-color-enabled);
    --x-accordion-background-color-hovered: var(--x-aria-background-color-hovered);
    --x-accordion-background-color-focused: var(--x-aria-background-color-focused);
    --x-accordion-background-color-focused-hovered: var(--x-aria-background-color-focused-hovered);
    /* --x-accordion-border-width: var(--x-aria-border-width) !important; */
    --x-accordion-border-width: var(--x-aria-border-width); /* @todo Test without !important */
    --x-accordion-border-color-enabled: var(--x-aria-border-color-enabled);
    --x-accordion-border-color-hovered: var(--x-aria-border-color-hovered);
    --x-accordion-border-color-focused: var(--x-aria-border-color-focused);
  }
  .x-accordion-trigger:focus,
  .x-accordion-trigger:focus-visible {
    outline: 0.25rem solid transparent;
  }
  .x-accordion-trigger-label { border: transparent 0.125rem solid; }
  .x-accordion-trigger-label::after { border: transparent 0.125rem solid; }
  .x-accordion-trigger:focus .x-accordion-trigger-label { border-color: var(--x-accordion-border-color-focused); }
  .x-accordion-trigger:focus:hover .x-accordion-trigger-label::after { border-color: transparent; }
  .x-accordion-trigger:hover .x-accordion-trigger-label::after { border-color: var(--x-accordion-border-color-hovered); }

  .x-accordion.is-bordered {
    --x-accordion-border-width: 0.125rem;
    --x-accordion-border-color-enabled: var(--x-aria-border-color-enabled);
    --x-accordion-border-color-hovered: var(--x-aria-border-color-hovered);
    --x-accordion-border-color-focused: var(--x-aria-border-color-focused);
  }
}

/* ** X Accordion: Animation fallback for browsers with no support for interpolate-size */
@supports not (interpolate-size: allow-keywords) {
  .x-accordion {
    --x-accordion-panel-space-y-start: 0;
  }

  .x-accordion-panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.45s ease-in-out;
  }
  .x-accordion-panel[hidden] {
    display: grid !important; /* !important is required because of Bootstrap */
    grid-template-rows: 0fr;
  }

  .x-accordion-panel > .inner {
    overflow: hidden;
    padding-block: var(--x-accordion-panel-space-y-start) var(--x-accordion-panel-space-y-end);
    transition: padding-block 0.45s ease-in-out;
  }
  .x-accordion-panel[hidden] > .inner {
    overflow: hidden;
    padding-block: 0;
  }
}

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .x-accordion {
      --x-accordion-panel-space-y-start: 0;

      interpolate-size: allow-keywords;
    }
    .x-accordion-panel {
      display: block;
      height: auto;
      overflow: hidden;

      will-change: height;
      transition-duration: 0.6s;
      transition-delay: 0s;
      transition-property: height;
      transition-behavior: normal;
      transition-timing-function: ease-in-out;
    }
    .x-accordion-panel > .inner {
      transform: translateY(0);
      opacity: 1;

      will-change: transform, opacity;
      transition-duration: 0.75s;
      transition-delay: 0.1s;
      transition-property: transform, opacity;
      transition-behavior: normal;
      transition-timing-function: ease-in-out;
    }

    .x-accordion-panel[hidden] {
      display: block !important; /* !important is required because of Bootstrap */
      height: 0;
      transition-delay: 0s;
    }

    .x-accordion-panel[hidden] > .inner {
      transform: translateY(var(--x-accordion-content-shift-y));
      opacity: 0;
      transition-duration: 0.45s;
      transition-delay: 0s;
    }

    .x-accordion-trigger-label::after {
      will-change: transform;
      transition-duration: 0.45s;
      transition-delay: 0s;
      transition-property: transform;
      transition-behavior: normal;
      transition-timing-function: ease-in-out;
    }
    .x-accordion-trigger[aria-expanded="true"] .x-accordion-trigger-label::after {
      transform: rotate(180deg);
    }
  }
}