@mixin sm {
  @media (min-width: $breakpoint-sm) {
    @content;
  }
}

@mixin md {
  @media (min-width: $breakpoint-md) {
    @content;
  }
}

@mixin lg {
  @media (min-width: $breakpoint-lg) {
    @content;
  }
}

@mixin xl {
  @media (min-width: $breakpoint-xl) {
    @content;
  }
}

@mixin xxl {
  @media (min-width: $breakpoint-2xl) {
    @content;
  }
}

// Flexbox helpers
@mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// Grid helpers
@mixin grid($columns: 1, $gap: $spacing-4) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

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

// Buttons
@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: $font-weight-medium;
  border-radius: $radius-md;
  transition: $transition-base;
  cursor: pointer;
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

// Focus styles
@mixin focus-ring {
  outline: none;
  box-shadow: 0 0 0 2px rgba($color-primary, 0.5);
}

// Card styles
@mixin card {
  background-color: $color-background;
  border-radius: $radius-lg;
  border: 1px solid $color-border;
  overflow: hidden;
}
