@layer windfce_accordion {
  .frame-type-windfce_accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-block-end: var(--wind-fce-spacing, 1.25rem);
    max-width: 100%;

    details {
      overflow: clip;
      color: var(--wind-fce-color-text, #1e293b);
      background-color: var(--wind-fce-color-surface, #fff);
      border: 1px solid var(--wind-fce-color-border-light, #cbd5e1);
      border-radius: var(--wind-fce-radius, 0.5rem);
      transition: border-color var(--wind-fce-transition-duration, 180ms)
        ease-out;

      summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
        min-height: 3.5rem;
        padding: 1rem 1.25rem;
        margin: 0;
        color: var(--wind-fce-color-text, #1e293b);
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.4;
        text-wrap: balance;
        list-style: none;
        cursor: pointer;
        user-select: none;
        transition: background-color var(--wind-fce-transition-duration, 180ms)
          ease-out;

        &::marker {
          content: "";
        }

        &::-webkit-details-marker {
          display: none;
        }

        &::after {
          flex: 0 0 1.5rem;
          width: 1.5rem;
          height: 1.5rem;
          content: "";
          background-color: currentColor;
          mask: url("images/accordion-arrow.svg") no-repeat center / contain;
          -webkit-mask: url("images/accordion-arrow.svg") no-repeat center /
            contain;
          transition: transform var(--wind-fce-transition-duration, 180ms)
            ease-out;
        }

        &:hover {
          background-color: var(--wind-fce-color-primary-light, #eff6ff);
        }

        &:focus-visible {
          outline: 3px solid var(--wind-fce-focus-color, #1d4ed8);
          outline-offset: -3px;
        }
      }

      .text {
        padding: 0 1.25rem 1.25rem;

        > :last-child {
          margin-block-end: 0;
        }
      }

      &[open] {
        border-color: var(--wind-fce-color-border, #64748b);

        summary {
          background-color: var(--wind-fce-color-primary-light, #eff6ff);

          &::after {
            transform: rotate(180deg);
          }
        }
      }
    }
  }
}