ice/src/scss/mixins.scss

// Import variables
@use 'variables' as *;

// Button mixin
@mixin button($bg-color: $primary-color, $text-color: white, $size: md) {
  border: none;
  border-radius: $border-radius-sm;
  cursor: pointer;
  font-family: $font-family;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
  
  @if $size == sm {
    padding: $spacing-xs $spacing-sm;
    font-size: $font-size-sm;
  } @else if $size == lg {
    padding: $spacing-md $spacing-lg;
    font-size: $font-size-lg;
  } @else {
    padding: $spacing-sm $spacing-md;
    font-size: $font-size-md;
  }
  
  background-color: $bg-color;
  color: $text-color;
  
  &:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }
  
  &:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  
  &:active {
    transform: translateY(0);
  }
}

// Card mixin
@mixin card($padding: $spacing-lg) {
  background: var(--card-bg);
  color: var(--text-color);
  padding: $padding;
  border-radius: $border-radius-md;
  box-shadow: $shadow-md;
}

// Flex layout mixins
@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;
}

// Table styling mixin
@mixin table-base {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: $border-radius-md;
  overflow: hidden;
  box-shadow: $shadow-md;
  
  th, td {
    padding: $spacing-sm $spacing-md;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
  }
  
  th {
    background-color: var(--table-header-bg);
    font-weight: bold;
  }
  
  tr:hover {
    background-color: var(--table-hover);
  }
}

// Form input mixin
@mixin input-base {
  padding: $spacing-sm $spacing-md;
  border: 1px solid var(--input-border);
  border-radius: $border-radius-sm;
  font-size: $font-size-md;
  font-family: $font-family;
  background-color: var(--input-bg);
  color: var(--text-color);
  transition: border-color 0.2s ease;
  
  &:focus {
    outline: none;
    border-color: $primary-color;
    box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
  }
}

// Status indicator mixin
@mixin status-indicator($bg-color, $text-color) {
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-lg;
  font-size: $font-size-sm;
  font-weight: bold;
  background-color: $bg-color;
  color: $text-color;
}

// Theme Toggle Mixin (consolidates duplicated theme toggle styles)
@mixin theme-toggle-styles($width: 40px, $height: 40px) {
  @include button($bg-color: transparent);
  border: 2px solid var(--border-color);
  border-radius: $border-radius-full;
  width: $width;
  height: $height;
  @include flex-center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px var(--shadow);
  
  &:hover {
    background-color: var(--table-hover);
    transform: none;
  }
}

// Back-link button mixin (shared component)
@mixin back-link-styles {
  display: inline-block;
  margin-top: $spacing-lg;
  padding: $spacing-sm $spacing-md;
  color: white;
  background-color: var(--primary-color, $primary-color);
  border: none;
  border-radius: $border-radius-sm;
  text-decoration: none;
  transition: background-color 0.2s ease;
  font-weight: 500;
  
  &:hover {
    background-color: var(--primary-hover, $secondary-color);
    color: white;
    text-decoration: none;
  }
  
  &:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}

// Responsive breakpoint mixins
@mixin mobile {
  @media (max-width: $mobile) {
    @content;
  }
}

@mixin tablet {
  @media (max-width: $tablet) {
    @content;
  }
}

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