Laravel/resources/sass/abstracts/_mixins.scss

/**
 * Mixins - Enterprise SCSS Architecture
 * Professional Resume Builder
 * 
 * @author David Valera Melendez <david@valera-melendez.de>
 * @created 2025-08-08
 * @location Made in Germany 🇩🇪
 */

// ==========================================================================
// Media Query Mixins
// ==========================================================================
@mixin media-up($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

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

@mixin media-between($min, $max) {
  @media (min-width: $min) and (max-width: ($max - 1px)) {
    @content;
  }
}

// ==========================================================================
// Flexbox 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-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

// ==========================================================================
// Button Mixins
// ==========================================================================
@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-base;
  border: none;
  border-radius: $radius-md;
  font-weight: $font-weight-medium;
  font-size: $font-size-base;
  line-height: $line-height-tight;
  text-decoration: none;
  cursor: pointer;
  transition: all $transition-base;
  user-select: none;
  
  &:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba($primary-color, 0.1);
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

@mixin button-variant($bg-color, $text-color: $white, $hover-bg-color: null) {
  @include button-base;
  
  background-color: $bg-color;
  color: $text-color;
  
  @if $hover-bg-color {
    &:hover:not(:disabled) {
      background-color: $hover-bg-color;
      transform: translateY(-1px);
      box-shadow: $shadow-md;
    }
  } @else {
    &:hover:not(:disabled) {
      background-color: darken($bg-color, 8%);
      transform: translateY(-1px);
      box-shadow: $shadow-md;
    }
  }
  
  &:active {
    transform: translateY(0);
  }
}

// ==========================================================================
// Card Mixins
// ==========================================================================
@mixin card-base {
  background-color: $white;
  border-radius: $radius-xl;
  box-shadow: $shadow-sm;
  overflow: hidden;
  transition: all $transition-base;
}

@mixin card-hover {
  &:hover {
    transform: translateY(-2px);
    box-shadow: $shadow-lg;
  }
}

// ==========================================================================
// Form Mixins
// ==========================================================================
@mixin form-control-base {
  display: block;
  width: 100%;
  padding: $spacing-sm $spacing-base;
  font-size: $font-size-base;
  font-weight: $font-weight-normal;
  line-height: $line-height-normal;
  color: $text-primary;
  background-color: $white;
  border: 2px solid $border-color;
  border-radius: $radius-md;
  transition: all $transition-base;
  
  &:focus {
    outline: none;
    border-color: $primary-color;
    box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.25);
  }
  
  &::placeholder {
    color: $text-muted;
    opacity: 1;
  }
  
  &:disabled {
    background-color: $gray-100;
    opacity: 1;
    cursor: not-allowed;
  }
}

// ==========================================================================
// Animation Mixins
// ==========================================================================
@mixin fade-in($duration: $transition-base) {
  animation: fadeIn $duration ease-out;
}

@mixin slide-up($duration: $transition-base) {
  animation: slideUp $duration ease-out;
}

@mixin scale-in($duration: $transition-base) {
  animation: scaleIn $duration ease-out;
}

// ==========================================================================
// Utility Mixins
// ==========================================================================
@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

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

@mixin aspect-ratio($width, $height) {
  position: relative;
  
  &::before {
    content: '';
    display: block;
    padding-top: percentage($height / $width);
  }
  
  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

// ==========================================================================
// Background Pattern Mixins
// ==========================================================================
@mixin grid-pattern($size: 50px, $color: rgba(255, 255, 255, 0.1)) {
  background-image: 
    radial-gradient(circle at 25% 25%, $color 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, $color 1px, transparent 1px);
  background-size: $size $size;
}

@mixin dot-pattern($size: 20px, $color: rgba(0, 0, 0, 0.1)) {
  background-image: radial-gradient(circle, $color 1px, transparent 1px);
  background-size: $size $size;
}