@import "mixins-icons";

$mediaBreakPointExtraLarge: 1200px;
$mediaBreakPointLarge: 992px;
$mediaBreakPointMedium: 768px;
$mediaBreakPointSmall: 576px;

@mixin media-breakpoint-up($breakPoint) {
  @media (min-width: $breakPoint) {
    @content;
  }
}

@mixin media-breakpoint-down($breakPoint) {
  @media (max-width: $breakPoint - 0.1) {
    @content;
  }
}

@mixin var($property, $name, $prefix) {
  #{$property}: var(--#{$prefix}-#{$name}, var(--#{$name}));
}