/* =========================
   Empty state
========================= */

@use "../kit-deps" as *;

.empty-state {
  max-width: 560px;
  padding: $space-6;
  border: $border-width-base $border-style-base $border-color-muted;
  border-left-width: $border-width-accent;
  border-radius: $radius-md;
  background-color: $surface-panel-muted;
  text-align: left;

  .empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: $space-4;
    color: $neutral-900;
    background-color: $yellow-400;
    border-radius: $radius-md;
    font-size: 24px;

    .vmk-icon {
      width: 24px;
      height: 24px;
    }
  }

  .empty-state-title {
    margin: 0 0 $space-2;
    font-size: 20px;
    font-weight: $font-weight-bold;
    line-height: 1.3;
    color: $neutral-900;
  }

  .empty-state-text {
    max-width: 440px;
    margin: 0 0 $space-5;
    color: $neutral-600;
    font-size: 15px;
    line-height: 1.6;
  }

  .empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: $space-3;
  }

  &.empty-state-error {
    border-color: $danger-text;

    .empty-state-icon {
      background-color: $danger-text;
      color: $neutral-0;
    }
  }

  &.empty-state-success {
    border-color: $success-text;

    .empty-state-icon {
      background-color: $success-text;
      color: $neutral-0;
    }
  }
}