// ====================================================================
// 1. Media queries
@mixin bp-large-mobile-up {
   @media (min-width: $breakpoint-sm) {
      @content;
   }
}

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

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

@mixin bp-large-desktop-up {
   @media (min-width: $breakpoint-xl) {
      @content;
   }
}

@mixin bp-print {
   @media print {
      @content;
   }
}

// ====================================================================
// 2. Buttons
@mixin button($color, $variation, $outline) {
   &-#{$variation} {
      @if $outline {
         &-outline {
            border-color: $color;
            color: $color;

            &:hover,
            &:focus,
            &.active {
               background: $color;
               color: white;
            }
         }
      }

      @else {
         border-color: $color;
         background: $color;

         &:hover,
         &:focus {
            border-color: $color;
            background: $color;
            color: white;
         }
      }
   }
}