@use 'sass:map';

@use './vars' as *;

@mixin with-border {
  border-bottom: 2px solid transparent;
}

$breakpoints: (
  'sm': #{$breakpoint-sm},
  'md': #{$breakpoint-md},
  'lg': #{$breakpoint-lg},
  'xlg': #{$breakpoint-xlg},
  'xxl': #{$breakpoint-xxl},
) !default;

@mixin respond-to($breakpoint) {
  @if #{map.has-key($breakpoints, $breakpoints)} {
    @media screen and (min-width: #{map.get($breakpoints, $breakpoint)}) {
      @content;
    }
  }
}
