sa4cps-frontend/src/assets/scss/abstracts/_mixins.scss

// Responsive breakpoints
@mixin respond-above($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

@mixin respond-below($breakpoint) {
  @media (max-width: #{$breakpoint - 1px}) {
    @content;
  }
}

// Flexbox utilities
@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-column {
  display: flex;
  flex-direction: column;
}

// Grid utilities
@mixin grid-responsive(
  $columns-mobile: 1,
  $columns-tablet: 2,
  $columns-desktop: 3,
  $gap: $spacing-md
) {
  display: grid;
  gap: $gap;
  grid-template-columns: repeat($columns-mobile, 1fr);

  @include respond-above($breakpoint-md) {
    grid-template-columns: repeat($columns-tablet, 1fr);
  }

  @include respond-above($breakpoint-lg) {
    grid-template-columns: repeat($columns-desktop, 1fr);
  }
}

// Button mixins
@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: $radius-md;
  font-weight: 500;
  transition: all $transition-fast;
  cursor: pointer;
  border: none;
  text-decoration: none;

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

@mixin button-primary {
  @include button-base;
  background-color: $primary;
  color: white;

  &:hover:not(:disabled) {
    background-color: $primary-dark;
  }
}

@mixin button-secondary {
  @include button-base;
  background-color: $gray-100;
  color: $gray-700;
  border: 1px solid $gray-200;

  &:hover:not(:disabled) {
    background-color: $gray-200;
  }
}

// Card mixins
@mixin card-base {
  background-color: white;
  border-radius: $radius-2xl;
  box-shadow: $shadow-sm;
  border: 1px solid $gray-100;
}

@mixin card-padding($size: md) {
  @if $size == sm {
    padding: $spacing-md;
  } @else if $size == md {
    padding: $spacing-lg;
  } @else if $size == lg {
    padding: $spacing-xl;
  }
}

// Status indicators
@mixin status-indicator($color) {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: $color;
}

// Sensor type styling
@mixin sensor-type-style($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: $spacing-sm;
  border-radius: $radius-lg;
}

// Battery indicator
@mixin battery-indicator {
  height: 0.25rem;
  background-color: $gray-200;
  border-radius: 9999px;
  overflow: hidden;

  .fill {
    height: 100%;
    border-radius: inherit;
    transition: all $transition-normal;

    &.good {
      background-color: $battery-good;
    }

    &.warning {
      background-color: $battery-warning;
    }

    &.critical {
      background-color: $battery-critical;
    }
  }
}

// Custom slider
@mixin custom-slider {
  width: 100%;
  height: 0.5rem;
  background-color: $gray-200;
  border-radius: $radius-lg;
  appearance: none;
  cursor: pointer;

  &::-webkit-slider-thumb {
    appearance: none;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 50%;
    background: $primary;
    cursor: pointer;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  }

  &::-moz-range-thumb {
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 50%;
    background: $primary;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
  }
}

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