SCSS Mixins and Functions

/**
 * Create media query for specified breakpoint
 * @param $value - Breakpoint name or custom value
 */
@mixin breakpoint($value) {
  @if type-of($value) == 'string' {
    @if map-has-key($breakpoints, $value) {
      @media #{map-get($breakpoints, $value)} { @content; }
    }
  }
}

/**
 * Create max-width media query
 * @param $size - Breakpoint name
 */
@mixin down($size) {
  @media screen and (max-width: #{map-get($breakpoints, $size) - 1px}) {
    @content;
  }
}

/**
 * Create media query for range between breakpoints
 * @param $lower - Lower breakpoint
 * @param $upper - Upper breakpoint  
 */
@mixin between($lower, $upper) {
  @media screen and (min-width: #{map-get($breakpoints, $lower)}) 
    and (max-width: #{map-get($breakpoints, $upper) - 1px}) {
    @content;
  }
}

/**
 * Get breakpoint value
 * @param $val - Breakpoint name
 * @return Breakpoint value in pixels
 */
@function breakpoint($val) {
  @return map-get($breakpoints, $val);
}

/**
 * Default breakpoint map
 */
$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
) !default;

// Basic responsive styling
.my-component {
  padding: 1rem;
  
  @include breakpoint(medium) {
    padding: 2rem;
  }
  
  @include breakpoint(large) {
    padding: 3rem;
  }
}

// Max-width media queries
.mobile-only {
  display: block;
  
  @include down(medium) {
    display: none;
  }
}

// Range-based media queries
.tablet-only {
  @include between(medium, large) {
    display: block;
  }
}

// Custom breakpoints
.custom-component {
  @include breakpoint(1200px) {
    width: 100%;
  }
}

/**
 * Include all Foundation components
 * @param $flex - Use flexbox grid (default: true)
 * @param $prototype - Include prototype utilities (default: false)
 * @param $xy-grid - Use XY Grid system (default: $xy-grid variable)
 */
@mixin foundation-everything($flex: true, $prototype: false, $xy-grid: $xy-grid);

/**
 * Individual component mixins
 */
@mixin foundation-global-styles; // Base styles and normalize
@mixin foundation-forms; // Form styling
@mixin foundation-typography; // Typography styles

// Grid systems
@mixin foundation-grid; // Float grid
@mixin foundation-flex-grid; // Flex grid
@mixin foundation-xy-grid-classes; // XY Grid

// Components
@mixin foundation-button;
@mixin foundation-button-group;
@mixin foundation-accordion;
@mixin foundation-callout;
@mixin foundation-card;
@mixin foundation-dropdown;
@mixin foundation-menu;
@mixin foundation-off-canvas;
@mixin foundation-orbit;
@mixin foundation-reveal;
@mixin foundation-tabs;
@mixin foundation-tooltip;

// Utilities
@mixin foundation-float-classes;
@mixin foundation-flex-classes;
@mixin foundation-visibility-classes;
@mixin foundation-prototype-classes;

// Include everything
@include foundation-everything;

// Include only specific components
@include foundation-global-styles;
@include foundation-grid;
@include foundation-button;
@include foundation-forms;

// Custom Foundation build
@include foundation-global-styles;
@include foundation-xy-grid-classes;
@include foundation-button;
@include foundation-callout;
@include foundation-reveal;
@include foundation-visibility-classes;

/**
 * Create grid container
 * @param $width - Maximum width
 * @param $padding - Container padding
 */
@mixin grid-container($width: $grid-container-max, $padding: $grid-container-padding);

/**
 * Create grid row
 * @param $behavior - Row behavior ('nest', 'collapse', null)
 * @param $width - Row width
 * @param $columns - Number of columns
 * @param $base - Include base styles
 * @param $gutter - Gutter size
 */
@mixin grid-row(
  $behavior: null, 
  $width: $grid-row-width, 
  $columns: $grid-column-count, 
  $base: true, 
  $gutter: $grid-column-gutter
);

/**
 * Create grid column
 * @param $columns - Number of columns to span
 * @param $last-column - Is last column in row
 * @param $center - Center the column
 * @param $offset - Column offset
 * @param $push - Push column right
 * @param $pull - Pull column left
 * @param $collapse - Remove gutters
 * @param $float - Float direction
 * @param $gutter - Gutter size
 */
@mixin grid-column(
  $columns: null,
  $last-column: false,
  $center: false,
  $offset: null,
  $push: null,
  $pull: null,
  $collapse: null,
  $float: left,
  $gutter: $grid-column-gutter
);

/**
 * Size column to specific width
 * @param $columns - Number of columns
 */
@mixin grid-column-size($columns);

/**
 * Offset column by specific amount
 * @param $columns - Number of columns to offset
 */
@mixin grid-column-offset($columns);

// Custom grid container
.custom-container {
  @include grid-container(1200px, 2rem);
}

// Custom grid row
.custom-row {
  @include grid-row;
}

// Custom columns
.sidebar {
  @include grid-column(3);
  
  @include breakpoint(medium) {
    @include grid-column-size(4);
  }
}

.main-content {
  @include grid-column(9);
  
  @include breakpoint(medium) {
    @include grid-column-size(8);
  }
}

// Centered column
.centered-content {
  @include grid-column(6, $center: true);
}

/**
 * Create button base styles
 * @param $padding - Button padding
 * @param $margin - Button margin
 * @param $fill - Background fill
 * @param $background - Background color
 * @param $background-hover - Hover background color
 * @param $color - Text color
 * @param $color-hover - Hover text color
 * @param $style - Button style ('solid', 'hollow', 'clear')
 */
@mixin button(
  $padding: $button-padding,
  $margin: $button-margin,
  $fill: solid,
  $background: $button-background,
  $background-hover: $button-background-hover,
  $color: $button-color,
  $color-hover: $button-color-hover,
  $style: $button-fill
);

/**
 * Create button size variant
 * @param $size - Size name
 * @param $font-size - Font size
 * @param $padding - Padding values
 */
@mixin button-size($size, $font-size, $padding);

/**
 * Create button color variant
 * @param $background - Background color
 * @param $background-hover - Hover background
 * @param $color - Text color
 * @param $color-hover - Hover text color
 */
@mixin button-style($background, $background-hover, $color, $color-hover);

// Custom button variant
.custom-button {
  @include button(
    $background: #ff6b35,
    $background-hover: #e55a2b,
    $color: white,
    $style: solid
  );
}

// Custom button sizes
.button-huge {
  @include button-size(huge, 1.5rem, 1.5rem 2rem);
}

.button-mini {
  @include button-size(mini, 0.7rem, 0.4rem 0.8rem);
}

// Brand color buttons
.button-brand {
  @include button-style(
    $background: $brand-primary,
    $background-hover: darken($brand-primary, 10%),
    $color: white,
    $color-hover: white
  );
}

/**
 * Include web font face
 * @param $name - Font family name
 * @param $path - Path to font files
 * @param $weight - Font weight
 * @param $style - Font style
 */
@mixin font-face($name, $path, $weight: normal, $style: normal);

/**
 * Create responsive text sizing
 * @param $small - Small breakpoint size
 * @param $medium - Medium breakpoint size
 * @param $large - Large breakpoint size
 */
@mixin responsive-text-size($small, $medium: null, $large: null);

// Add custom web font
@include font-face('CustomFont', '/fonts/custom-font', normal, normal);

// Responsive typography
.hero-title {
  @include responsive-text-size(2rem, 3rem, 4rem);
  font-family: 'CustomFont', sans-serif;
}

/**
 * Convert pixel values to rem units
 * @param $values - List of values to convert
 * @param $base - Base font size (default: 16px)
 * @return Converted rem values
 */
@function rem-calc($values, $base: 16px);

/**
 * Remove unit from number
 * @param $num - Number with unit
 * @return Unitless number
 */
@function strip-unit($num);

/**
 * Convert value to rem
 * @param $value - Value to convert
 * @param $base - Base font size
 * @return Value in rem units
 */
@function convert-to-rem($value, $base: 16px);

/**
 * Mathematical functions
 */
@function pow($base, $exponent); // Power function
@function factorial($value); // Factorial function  
@function sqrt($r); // Square root function

// Convert pixels to rem
.component {
  padding: rem-calc(16 24 32); // 1rem 1.5rem 2rem
  margin: rem-calc(20); // 1.25rem
  font-size: rem-calc(18); // 1.125rem
}

// Mathematical calculations
.triangle {
  width: rem-calc(pow(10, 2)); // 100px converted to rem
}

// Unit stripping
$font-size: 18px;
$unitless-size: strip-unit($font-size); // 18

/**
 * Smart color scaling that adjusts lightness or darkness
 * @param $color - Base color
 * @param $scale - Scale percentage
 * @param $threshold - Lightness threshold
 * @return Scaled color
 */
@function smart-scale($color, $scale, $threshold: 40%);

/**
 * Choose appropriate foreground color based on background
 * @param $color - Background color
 * @param $yes - Color for light backgrounds
 * @param $no - Color for dark backgrounds
 * @return Appropriate foreground color
 */
@function foreground($color, $yes: #000, $no: #fff);

/**
 * Check if color is light
 * @param $color - Color to check
 * @return Boolean indicating if color is light
 */
@function isitlight($color);

// Smart color scaling
$primary-color: #2199e8;
$primary-hover: smart-scale($primary-color, 15%);

// Automatic foreground color selection
.dynamic-component {
  background-color: $brand-color;
  color: foreground($brand-color, #333, #fff);
}

// Conditional styling based on color lightness
@if isitlight($background-color) {
  .text {
    color: #333;
  }
} @else {
  .text {
    color: #fff;
  }
}

// Custom card component using Foundation utilities
@mixin custom-card(
  $background: white,
  $border: 1px solid #e6e6e6,
  $padding: 1rem,
  $shadow: 0 2px 4px rgba(0,0,0,0.1)
) {
  background: $background;
  border: $border;
  padding: $padding;
  box-shadow: $shadow;
  border-radius: 4px;
  
  // Use Foundation's responsive mixins
  @include breakpoint(medium) {
    padding: $padding * 1.5;
  }
  
  // Use Foundation's color functions
  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
  }
}

// Custom navigation using Foundation's menu mixins
@mixin custom-nav {
  @include menu-base;
  @include menu-expand;
  
  background: $primary-color;
  
  li a {
    color: foreground($primary-color);
    
    &:hover {
      background: smart-scale($primary-color, 10%);
    }
  }
  
  @include breakpoint(small only) {
    @include menu-direction(vertical);
  }
}

// Usage
.my-card {
  @include custom-card;
}

.my-navigation {
  @include custom-nav;
}

// Global settings
$global-font-size: 100% !default;
$global-width: rem-calc(1200) !default;
$global-lineheight: 1.5 !default;
$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
) !default;

// Grid settings
$grid-row-width: $global-width !default;
$grid-column-count: 12 !default;
$grid-column-gutter: (
  small: 20px,
  medium: 30px,
) !default;

// Breakpoint settings
$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
) !default;
$print-breakpoint: large !default;

// Component settings
$button-padding: 0.85em 1em !default;
$button-margin: 0 0 1rem 0 !default;
$button-fill: solid !default;
$button-background: $primary-color !default;
$button-background-hover: scale-color($button-background, $lightness: -15%) !default;