@layer atoms {
  .mobius-accordion {
    --transition-duration: 0ms;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    outline: none;

    &.--should-animate {
      --transition-duration: 500ms;
    }
  }

  .mobius-accordion__content-container {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-duration);

    &.--is-open {
      grid-template-rows: 1fr;
    }
  }

  .mobius-accordion__content {
    overflow: hidden;
    opacity: 0;
    transition:
      opacity var(--transition-duration),
      margin var(--transition-duration);

    &.--is-open {
      overflow: visible;
      opacity: 1;
      margin-top: var(--size-xs);
    }
  }

  /* Links */
  .mobius-accordion__link {
    display: flex;
    align-items: center;
    border-radius: var(--radius-1);
    color: var(--color-accordion-link, var(--color-secondary));
    cursor: pointer;
    outline: none;
    text-decoration: underline;
    text-underline-offset: var(--accordion-link-underline-offset, 6px);

    &:hover,
    &:active {
      color: var(--color-accordion-link-hover, var(--color-secondary-hover));
      text-decoration: var(--accordion-link-hover-text-decoration, underline);
    }

    &:focus-visible {
      outline: none;
      box-shadow: var(--accordion-box-shadow, var(--box-shadow-default));
    }
  }

  h1.mobius-accordion__link-text,
  h2.mobius-accordion__link-text,
  h3.mobius-accordion__link-text,
  h4.mobius-accordion__link-text,
  h5.mobius-accordion__link-text,
  h6.mobius-accordion__link-text,
  .mobius-accordion__link-text {
    margin: 0;
    /* Text order: when icon-position is 1 (left), text is 2; when icon-position is 2 (right), text is 1 */
    order: calc(3 - var(--mobius-accordion-icon-position, 2));
    line-height: var(--line-height-normal);
    font-size: var(--accordion-font-size, var(--font-size-small-paragraph));
    font-weight: var(--accordion-font-weight, var(--font-weight-normal));
  }

  .mobius-accordion__link-icon {
    /* Icon order: directly uses the position value */
    order: var(--mobius-accordion-icon-position, 2);
    /* Dynamic margin: when icon position is 1 (left), margin-left = 0 and margin-right = margin;
       when icon position is 2 (right), margin-left = margin and margin-right = 0 */
    margin-left: calc(
      (var(--mobius-accordion-icon-position, 2) - 1) *
        var(--accordion-icon-margin, var(--size-xs))
    );
    margin-right: calc(
      (2 - var(--mobius-accordion-icon-position, 2)) *
        var(--accordion-icon-margin, var(--size-xs))
    );
    transition: transform var(--transition-duration);

    &.--is-open {
      transform: rotateZ(-180deg);
    }
  }
}
