Mixins

@@use 'sass:math';

/* 1) Basic mixin */
@@mixin sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.visually-hidden { @@include sr-only; }

/* 2) Mixin with arguments */
@@mixin button($bg, $fg: white) {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: $bg;
    color: $fg;
    border: 0;
    border-radius: 0.25rem;
    cursor: pointer;
}

.btn-primary { @@include button(#0ea5e9); }
.btn-danger  { @@include button(#ef4444); }
.btn-light   { @@include button(#f1f5f9, #111); }

/* 3) Mixin with @@content — wrap arbitrary CSS */
@@mixin breakpoint($min) {
    @@media (min-width: $min) { @@content; }
}

.container {
    padding: 1rem;
    @@include breakpoint(640px) { padding: 1.5rem; }
    @@include breakpoint(1024px) { padding: 2rem; }
}

/* 4) Theme mixin — emits a chunk of rules under a selector */
@@mixin theme($mode) {
    @@if $mode == 'dark' {
        --bg:   #0b0b0b;
        --fg:   #eee;
        --link: #79c0ff;
    } @@else {
        --bg:   #fff;
        --fg:   #111;
        --link: #0a66c2;
    }
}

:root              { @@include theme('light'); }
[data-theme='dark'] { @@include theme('dark'); }

/* 5) Variable arguments — pass any number */
@@mixin transitions($props...) {
    transition-property: $props;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.fade { @@include transitions(opacity, transform, background-color); }

/* 6) Keyword arguments — readable call sites */
@@mixin card($padding: 1rem, $radius: 0.5rem, $bg: white, $shadow: true) {
    padding: $padding;
    border-radius: $radius;
    background: $bg;
    @@if $shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
}

.product-card  { @@include card($padding: 1.5rem, $bg: #f9fafb); }
.minimal-card  { @@include card($shadow: false); }

/* 7) Mixins vs functions */
/*   - @@mixin emits RULES (declarations)
     - @@function returns a VALUE                              */
@@function spacer($n) { @@return $n * 0.25rem; }
.btn { padding: spacer(2) spacer(4); }     /* 0.5rem 1rem */

@mixin button($bg: #04AA6D) {
    padding: 8px 16px;
    background: $bg;
    color: #fff;
    border-radius: 4px;
}
.btn-primary { @include button; }