@use '../../settings/variables' as v;
@use '../functions/index' as functions;

// stylelint-disable function-parentheses-newline-inside, function-comma-newline-after
// Lifted out of the variables file to fix circular reference issues
$fozzie-breakpoints: functions.map-to-em((
    tiny       : 375px,
    narrow     : 414px,    // narrow devices
    narrowMid  : 600px,    // narrow-mid tweakpoint
    mid        : 768px,    // mid bp
    wide       : 1025px,   // wide bp
    huge       : 1280px    // huge bp
), 16); // set to 16 as this is default browser size
// stylelint-enable function-parentheses-newline-inside, function-comma-newline-after

@function populate-breakpoints() {
    $breakpointString: '';
    $breakpointsPx: functions.map-to-px($fozzie-breakpoints, 16);

    @each $name, $value in $breakpointsPx {
        $breakpointString: $breakpointString + '#{$name}:#{$value},';
    }

    @return str-slice($breakpointString, 0, str-length($breakpointString) - 1);
}

@mixin breakpoints() {
  .c-screen-sizer {
    display: none;
    content: populate-breakpoints();
  }
}