@use '../variables/variables-colors' as bf-v-color;
@use '../variables/variables-texts' as bf-v-text;
@use '../variables/variables-spacing' as bf-v-space;
@use '../variables/variables-breakpoints' as bf-v-bp;
@use 'sass:color';

// this is something similar to Bootstrap's spacing utility
// https://getbootstrap.com/docs/4.4/utilities/spacing/

// margins and paddings classes

.bf-m-0 {
  margin: 0 !important;
}

.bf-m-t-0 {
  margin-top: 0 !important;
}

.bf-m-b-0 {
  margin-bottom: 0 !important;
}

.bf-m-l-0 {
  margin-left: 0 !important;
}

.bf-m-r-0 {
  margin-right: 0 !important;
}

.bf-m-1 {
  margin-bottom: bf-v-space.$bf-spacing-md-rem !important;
}

.bf-m-2 {
  margin-bottom: bf-v-space.$bf-spacing-lg-rem !important;
}

.bf-m-3 {
  margin-bottom: bf-v-space.$bf-spacing-xl-rem !important;
}

.bf-m-4 {
  margin-bottom: bf-v-space.$bf-spacing-xxl-rem !important;
}

.bf-m-t-1 {
  margin-top: bf-v-space.$bf-spacing-md-rem !important;
}

.bf-m-t-2 {
  margin-top: bf-v-space.$bf-spacing-lg-rem !important;
}

.bf-m-t-3 {
  margin-top: bf-v-space.$bf-spacing-xl-rem !important;
}

.bf-m-t-4 {
  margin-top: bf-v-space.$bf-spacing-xxl-rem !important;
}

.bf-m-b-1 {
  margin-bottom: bf-v-space.$bf-spacing-md-rem !important;
}

.bf-m-b-2 {
  margin-bottom: bf-v-space.$bf-spacing-lg-rem !important;
}

.bf-m-b-3 {
  margin-bottom: bf-v-space.$bf-spacing-xl-rem !important;
}

.bf-m-b-4 {
  margin-bottom: bf-v-space.$bf-spacing-xxl-rem !important;
}

// paddings

.bf-p-0 {
  padding: 0 !important;
}

.bf-p-t-0 {
  padding-top: 0 !important;
}

.bf-p-b-0 {
  padding-bottom: 0 !important;
}

.bf-p-l-0 {
  padding-left: 0 !important;
}

.bf-p-r-0 {
  padding-right: 0 !important;
}

.bf-p-1 {
  padding-bottom: bf-v-space.$bf-spacing-md-rem !important;
}

.bf-p-2 {
  padding-bottom: bf-v-space.$bf-spacing-lg-rem !important;
}

.bf-p-3 {
  padding-bottom: bf-v-space.$bf-spacing-xl-rem !important;
}

.bf-p-4 {
  padding-bottom: bf-v-space.$bf-spacing-xxl-rem !important;
}

.bf-p-t-1 {
  padding-top: bf-v-space.$bf-spacing-md-rem !important;
}

.bf-p-t-2 {
  padding-top: bf-v-space.$bf-spacing-lg-rem !important;
}

.bf-p-t-3 {
  padding-top: bf-v-space.$bf-spacing-xl-rem !important;
}

.bf-p-t-4 {
  padding-top: bf-v-space.$bf-spacing-xxl-rem !important;
}

.bf-p-b-1 {
  padding-bottom: bf-v-space.$bf-spacing-md-rem !important;
}

.bf-p-b-2 {
  padding-bottom: bf-v-space.$bf-spacing-lg-rem !important;
}

.bf-p-b-3 {
  padding-bottom: bf-v-space.$bf-spacing-xl-rem !important;
}

.bf-p-b-4 {
  padding-bottom: bf-v-space.$bf-spacing-xxl-rem !important;
}