@layer components {
  .accordion__root-container {
    flex-direction: column;
    overflow: hidden;
  }

  .accordion__root-container--variant-surface {
    background-color: var(--color-surface);
    border-radius: var(--radius-3xl);
    border-width: 1px;
    border-color: var(--color-surface);
    box-shadow: var(--shadow-surface);
  }

  .accordion__root-background {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-3xl);
    overflow: hidden;
  }

  .accordion__root-separator {
    height: hairlineWidth();
    background-color: var(--color-separator);
  }

  .accordion__root-separator--variant-surface {
    margin-inline: calc(var(--spacing) * 3);
  }

  .accordion__item {
    flex-direction: column;
    overflow: hidden;
  }

  .accordion__trigger {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 3);
    gap: calc(var(--spacing) * 4);
    background-color: transparent;
    z-index: 10;
  }

  .accordion__trigger--variant-surface {
    padding-inline: calc(var(--spacing) * 5);
  }

  .accordion__indicator {
    align-items: center;
    justify-content: center;
  }

  .accordion__content {
    padding-inline: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 4);
    background-color: transparent;
  }

  .accordion__content--variant-surface {
    padding-inline: calc(var(--spacing) * 5);
  }
}