@layer modules {
  .stripe-account {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
    padding-block: 2rem;

    @media (min-width: 40rem) {
      max-width: 40rem;
    }
    @media (min-width: 48rem) {
      max-width: 48rem;
    }
    @media (min-width: 64rem) {
      max-width: 64rem;
    }
    @media (min-width: 80rem) {
      max-width: 80rem;
    }
    @media (min-width: 96rem) {
      max-width: 96rem;
    }
  }

  .stripe-account__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .stripe-account__title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-bold);
  }

  .stripe-account__card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }

  .stripe-account__card-body {
    padding: 1.5rem;
  }

  .stripe-account__status {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
  }

  .stripe-account__status-icon {
    flex-shrink: 0;
    border-radius: 3.40282e38px;
    padding: 0.5rem;
    margin-right: 1rem;
  }

  .stripe-account__status-icon--success {
    background-color: var(--color-green-100);
  }

  .stripe-account__status-icon--pending {
    background-color: var(--color-yellow-100);
  }

  .stripe-account__icon {
    height: 1.5rem;
    width: 1.5rem;
  }

  .stripe-account__icon--success {
    color: var(--color-green-600);
  }

  .stripe-account__icon--pending {
    color: var(--color-yellow-600);
  }

  .stripe-account__status-title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: 0.25rem;
  }

  .stripe-account__status-text {
    color: var(--color-gray-600);
  }

  .stripe-account__section {
    border-top-style: var(--tw-border-style, solid);
    border-top-width: 1px;
    border-top-color: var(--color-gray-200);
    padding-top: 1.5rem;
  }

  .stripe-account__section-title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    margin-bottom: 1rem;
  }

  .stripe-account__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* The icon keeps its own right margin, so the component gap is zeroed to avoid double spacing. */
  .stripe-account__button {
    --btn-gap: 0;
    border: 1px solid transparent;

    &:focus-visible {
      --focus-ring-color: var(--color-blue-500);
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .stripe-account__button-icon {
    margin-right: 0.5rem;
    height: 1.25rem;
    width: 1.25rem;
  }

  .stripe-account__expectations {
    background-color: var(--color-gray-50);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    margin-bottom: 1.5rem;
  }

  .stripe-account__expectations-title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
  }

  .stripe-account__expectations-list {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-600);

    & > :not(:last-child) {
      margin-block-start: 0;
      margin-block-end: 0.5rem;
    }
  }

  .stripe-account__expectation {
    display: flex;
    align-items: flex-start;
  }

  .stripe-account__expectation-icon {
    margin-right: 0.5rem;
    height: 1.25rem;
    width: 1.25rem;
    color: var(--color-blue-500);
  }
}