/* =============================================
=            Mixins                           =
============================================= */

/**
 *
 * Helpful reusable function-like things that will be used to implement
 * styles for components.
 *
 */
@use "sass:map";

@mixin secondary-heading {
  font-family: Roboto, sans-serif;
  font-size: px-to-rem(35);
  font-weight: 700;
}

@mixin body-font {
  font-family: Roboto, sans-serif;
  font-size: px-to-rem(18);
  font-weight: 400;
}

@mixin center {
  align-items: center;
  display: flex;
  justify-content: center;
}

@mixin mobile {
  @media (max-width: map.get($breakpoints, "sm")) {
    @content;
  }
}

@mixin tablet {
  @media (max-width: map.get($breakpoints, "lg")) {
    @content;
  }
}

@mixin laptop {
  @media (max-width: map.get($breakpoints, "xl")) {
    @content;
  }
}

@mixin padding($space) {
  padding: map.get($spacing, $space);
}

@mixin margin($space) {
  margin: map.get($spacing, $space);
}

@mixin margin-bottom($space) {
  margin-bottom: map.get($spacing, $space);
}

@mixin padding-horizontal($space) {
  padding-left: map.get($spacing, $space);
  padding-right: map.get($spacing, $space);
}

@mixin padding-vertical($space) {
  padding-bottom: map.get($spacing, $space);
  padding-top: map.get($spacing, $space);
}
