@use '../styles/variables' as *;

// ── Block ─────────────────────────────────────────────────────────────────────
.error-boundary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: $spacing-8;

  // ── Elements ────────────────────────────────────────────────────────────────
  &__box {
    text-align: center;
    max-width: 420px;
    padding: $spacing-10 $spacing-8;
    background: var(--clr-surface, #{$color-surface});
    border: 1px solid #fecaca;
    border-radius: $radius-xl;
    box-shadow: $shadow-md;
  }

  &__icon {
    font-size: 2.5rem;
    margin-bottom: $spacing-4;
  }

  &__title {
    font-size: $font-size-xl;
    font-weight: $font-weight-semibold;
    color: var(--clr-text, #{$color-text-primary});
    margin-bottom: $spacing-3;
  }

  &__message {
    font-size: $font-size-sm;
    color: var(--clr-text-secondary, #{$color-text-secondary});
    line-height: $line-height-relaxed;
    margin-bottom: $spacing-6;
  }

  &__btn {
    padding: $spacing-2 $spacing-6;
    background: var(--clr-primary, #{$color-primary});
    color: #fff;
    border: none;
    border-radius: $radius-base;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    font-family: $font-family-base;
    cursor: pointer;
    transition: background $transition-fast;

    &:hover { background: var(--clr-primary-hover, #{$color-primary-hover}); }
  }
}
