@layer components {
  .purchase-order-confirmation {
    background-color: var(--color-primary-1);
    border-radius: var(--border-radius-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg-x2);
    padding: var(--space-lg-x4) var(--space-md);
    text-align: center;
  }

  .purchase-order-confirmation__detail-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .purchase-order-confirmation__success {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .purchase-order-confirmation__success-title {
    font-size: var(--font-size-lg-x2);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-7);
  }

  .purchase-order-confirmation__success-content {
    color: var(--color-neutral-5);
  }

  .purchase-order-confirmation__detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x3);

    & span {
      display: inline-block;
      color: var(--color-primary-7);
      background: white;
      width: fit-content;
      padding: var(--length-2-5) var(--length-4);
      font-size: var(--font-size-sm-x1);
      box-shadow: var(--shadow-3);
      overflow-wrap: break-word;
      hyphens: auto;
    }
  }

  .purchase-order-confirmation__link {
    margin-block-start: var(--space-md);
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >=40rem) {
    .purchase-order-confirmation__detail-container {
      flex-direction: row;
      gap: var(--space-lg-x3);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >=48rem) {
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >=64rem) {
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >=80rem) {
  }
}