$breakpoints: (
  /* 320px */ 'xSmall': 20rem,
  /* 480px */ 'small': 30rem,
  /* 720px */ 'smallPlus': 45rem,
  /* 960px */ 'medium': 60rem,
  /* 1200px */ 'large': 75rem,
  /* 1440px */ 'xLarge': 90rem
);

@mixin breakpointsCssVariables {
  @each $name, $value in $breakpoints {
    --ds-breakpoint-#{$name}: #{$value};
  }
}

// Legacy mixin for backwards compatibility
@mixin breakpoints {
  :root,
  :host {
    @include breakpointsCssVariables;
  }
}