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

// Block
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: $spacing-2;
  padding: 2px $spacing-3;
  border-radius: $radius-full;
  font-family: $font-family-base;
  font-weight: $font-weight-semibold;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  white-space: nowrap;
  border: 1px solid transparent;

  // ── Elements ─────────────────────────────────────────────────
  &__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  &__label {
    line-height: 1;
  }

  // ── Status modifiers ──────────────────────────────────────────
  &--confirmed {
    background: var(--badge-confirmed-bg, #{$accent-100});
    color: var(--badge-confirmed-text, #{$accent-700});
    border-color: var(--badge-confirmed-border, #{$accent-200});

    .status-badge__dot {
      background: $accent-500;
    }
  }

  &--pending {
    background: var(--badge-pending-bg, #fef3c7);
    color: var(--badge-pending-text, #92400e);
    border-color: var(--badge-pending-border, #fde68a);

    .status-badge__dot {
      background: #f59e0b;
    }
  }

  &--cancelled {
    background: var(--badge-cancelled-bg, #fef2f2);
    color: var(--badge-cancelled-text, #991b1b);
    border-color: var(--badge-cancelled-border, #fecaca);

    .status-badge__dot {
      background: $color-error;
    }
  }

  // ── Size modifiers ────────────────────────────────────────────
  &--sm {
    font-size: $font-size-xs;
    padding: 1px $spacing-2;

    .status-badge__dot {
      width: 5px;
      height: 5px;
    }
  }

  &--md {
    font-size: $font-size-sm;
  }

  &--lg {
    font-size: $font-size-base;
    padding: $spacing-1 $spacing-4;

    .status-badge__dot {
      width: 9px;
      height: 9px;
    }
  }
}
