/* =========================
   SPACING UTILITIES
========================= */

@each $key, $value in $spaces {

  /* margin */
  .m-#{$key}  { margin:        $value !important; }
  .mt-#{$key} { margin-top:    $value !important; }
  .mr-#{$key} { margin-right:  $value !important; }
  .mb-#{$key} { margin-bottom: $value !important; }
  .ml-#{$key} { margin-left:   $value !important; }
  .mx-#{$key} {
    margin-left:  $value !important;
    margin-right: $value !important;
  }
  .my-#{$key} {
    margin-top:    $value !important;
    margin-bottom: $value !important;
  }

  /* padding */
  .p-#{$key}  { padding:        $value !important; }
  .pt-#{$key} { padding-top:    $value !important; }
  .pr-#{$key} { padding-right:  $value !important; }
  .pb-#{$key} { padding-bottom: $value !important; }
  .pl-#{$key} { padding-left:   $value !important; }
  .px-#{$key} {
    padding-left:  $value !important;
    padding-right: $value !important;
  }
  .py-#{$key} {
    padding-top:    $value !important;
    padding-bottom: $value !important;
  }

  /* gap */
  .g-#{$key} {
    gap: $value !important;
  }
}

.row {
  display: flex;
  flex-direction: row;
} 

.f-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.w-100 {
  width: 100%;
}

.w-200 {
  width: 200%;
}

$font-sizes: (
  xs: $font-size-xs,
  sm: $font-size-sm,
  md: $font-size-md,
  base: $font-size-base,
  lg: $font-size-lg,
  xl: $font-size-xl
);

@each $name, $size in $font-sizes {
  .fs-#{$name} {
    font-size: $size;
  }
}