Add SCSS styles for base, components, layouts, and utilities (not on

use)

src/assets/scss/abstracts/_mixins.scss

@@ -0,0 +1,181 @@
+// 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;
+}