@layer components {
  .result-state {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    max-inline-size: 28rem;
    align-items: center;
    gap: 2rem;
    padding-block: 2rem 1rem;
    text-align: center;

    .result-icon {
      display: grid;
      place-items: center;
      inline-size: 7rem;
      aspect-ratio: 1/1;
      border-radius: 8rem;

      & > i {
        font-size: 2.75rem;
        line-height: 1;
      }

      &.-success {
        background-color: var(--clr-success-50);
        color: var(--clr-success-600);
      }

      &.-danger {
        background-color: var(--clr-danger-50);
        color: var(--clr-danger-600);
      }
    }

    .result-info {
      display: flex;
      flex-flow: column nowrap;
      gap: 0.75rem;
      inline-size: min(100%, 25rem);
      margin-inline: auto;

      & > p {
        color: var(--clr-neutral-500);
        font-size: 0.875rem;
        line-height: 1.375;
      }
    }

    .result-actions {
      display: flex;
      flex-flow: row nowrap;
      gap: 0.75rem;
      justify-content: center;
      align-items: center;
    }
  }
}