@use 'variables' as v;

// ─────────────────────────────────────────────
// Flex helpers
// ─────────────────────────────────────────────
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

// ─────────────────────────────────────────────
// Text truncation
// ─────────────────────────────────────────────
@mixin truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// ─────────────────────────────────────────────
// Scrollbar
// ─────────────────────────────────────────────
@mixin scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: v.$gray-300 transparent;

  &::-webkit-scrollbar        { width: 5px; height: 5px; }
  &::-webkit-scrollbar-track  { background: transparent; }
  &::-webkit-scrollbar-thumb  { background: v.$gray-300; border-radius: v.$radius-full; }
  &::-webkit-scrollbar-thumb:hover { background: v.$gray-400; }
}

// ─────────────────────────────────────────────
// Card base
// ─────────────────────────────────────────────
@mixin card-base {
  background: v.$white;
  border: 1px solid v.$border-color;
  border-radius: v.$radius-lg;
  box-shadow: v.$shadow-sm;
}

// ─────────────────────────────────────────────
// Focus ring
// ─────────────────────────────────────────────
@mixin focus-ring($color: v.$primary) {
  outline: none;
  box-shadow: 0 0 0 3px rgba($color, 0.18);
}

// ─────────────────────────────────────────────
// Badge base
// ─────────────────────────────────────────────
@mixin badge-base {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: v.$radius-full;
  font-size: v.$font-size-xs;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

// ─────────────────────────────────────────────
// Responsive breakpoints
// ─────────────────────────────────────────────
@mixin sm  { @media (min-width: 640px)  { @content; } }
@mixin md  { @media (min-width: 768px)  { @content; } }
@mixin lg  { @media (min-width: 1024px) { @content; } }
@mixin xl  { @media (min-width: 1280px) { @content; } }

@mixin max-sm  { @media (max-width: 639px)  { @content; } }
@mixin max-md  { @media (max-width: 767px)  { @content; } }
@mixin max-lg  { @media (max-width: 1023px) { @content; } }
