// sample-styles.scss: a commented Sass stylesheet in SCSS syntax.
// Free sample from 99helpers.com/file-types/scss
// Compile it with Dart Sass: npx sass sample-styles.scss sample-styles.css
// Comments that start with // are "silent": they never reach the CSS.

/*! Compiled from sample-styles.scss, a free sample from 99helpers.com/file-types/scss */

// 1. @use loads Sass's built-in modules, each under a namespace.
@use "sass:color";
@use "sass:map";
@use "sass:math";

// 2. Variables start with $. With !default, a file that loads this one
//    can override the value.
$brand: #046eff !default;
$radius: 12px !default;
$space: 1rem;

// 3. A map: named values to look up or loop over.
$breakpoints: (
  "sm": 600px,
  "md": 900px,
  "lg": 1200px,
);

// 4. A function returns a value. math.div() divides: in Sass, "/" is
//    left as CSS's slash separator.
@function rem($px, $base: 16px) {
  @return math.div($px, $base) * 1rem;
}

// 5. A mixin outputs styles wherever it's included. @content inserts
//    the block written after @include. @error stops the compile.
@mixin above($name) {
  $width: map.get($breakpoints, $name);
  @if not $width {
    @error "Unknown breakpoint: #{$name}";
  }
  @media (min-width: $width) {
    @content;
  }
}

// 6. A placeholder selector (%) only reaches the CSS through @extend.
%focus-ring {
  outline: 3px solid color.adjust($brand, $alpha: -0.6);
  outline-offset: 2px;
}

// 7. Sass variables are fixed when the file is compiled. CSS custom
//    properties stay live in the browser. #{} writes one into the other.
:root {
  --brand: #{$brand};
  --radius: #{$radius};
}

// 8. Nesting: rules inside rules. & stands for the parent selector.
.card {
  padding: $space * 1.5;
  border-radius: $radius;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);

  h2 {
    margin-top: 0;
    font-size: rem(20px);
  }

  &:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 16%);
  }

  // &--featured becomes the class .card--featured
  &--featured {
    border: 2px solid $brand;
  }

  @include above("md") {
    padding: $space * 2;
  }
}

// 9. Colour functions run at compile time and output plain colours.
.button {
  display: inline-block;
  padding: rem(8px) rem(16px);
  border-radius: math.div($radius, 2);
  color: #fff;
  background: $brand;

  &:hover {
    background: color.scale($brand, $lightness: -15%);
  }

  &:focus-visible {
    @extend %focus-ring;
  }
}

// 10. @each writes one rule per map entry.
$tones: (
  "info": $brand,
  "success": #15803d,
  "warning": #b45309,
);

@each $name, $tone in $tones {
  .badge-#{$name} {
    color: $tone;
    background: color.scale($tone, $lightness: 85%);
  }
}

// 11. @for counts through a range: .mt-1 to .mt-4.
@for $i from 1 through 4 {
  .mt-#{$i} {
    margin-top: $space * $i * 0.5;
  }
}

// 12. Non-ASCII text: the compiled CSS gets @charset "UTF-8" (or a
//     byte order mark when compressed) so browsers read it correctly.
.price::before {
  content: "€ ";
}