$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};
  }
}

@mixin mediaQueriesCssVariables {
  --ds-media-above-xSmall: #{'@media all'}; // 0px
  --ds-media-above-small: #{'@media (min-width: 30rem)'}; // 480px
  --ds-media-above-smallPlus: #{'@media (min-width: 45rem)'}; // 720px
  --ds-media-above-medium: #{'@media (min-width: 60rem)'}; // 960px
  --ds-media-above-large: #{'@media (min-width: 75rem)'}; // 1200px
  --ds-media-above-xLarge: #{'@media (min-width: 90rem)'}; // 1440px
  --ds-media-only-xSmall: #{'@media (min-width: 0rem) and (max-width: 29.99rem)'}; // 0px
  --ds-media-only-small: #{'@media (min-width: 30rem) and (max-width: 44.99rem)'}; // 480px
  --ds-media-only-smallPlus: #{'@media (min-width: 45rem) and (max-width: 59.99rem)'}; // 720px
  --ds-media-only-medium: #{'@media (min-width: 60rem) and (max-width: 74.99rem)'}; // 960px
  --ds-media-only-large: #{'@media (min-width: 75rem) and (max-width: 89.99rem)'}; // 1200px
  --ds-media-only-xLarge: #{'@media (min-width: 90rem)'}; // 1440px
}

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