/* _utilities.scss */

/* General */
.hide { display: none !important; }
.clearfix { @include clearfix; }
.fluid { width: 100%; }
.left { float: left; }
.right { float: right; }
.inline { display: inline; }
.block { display: block; }
.inline-block { display: inline-block; }
.pointer { cursor: pointer; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.no-transition { transition: none !important; }

.show-md {
  display: none;
  @include medium {
    display: block !important;
  }
}
.show-md.inline-block {
  @include medium {
    display: inline-block !important;
  }
}

.hide-md {
  @include medium {
    display: none !important;
  }
}

// % Width utilities
.width-90-sm {
  width: 90%;
  @include medium {
    width: auto;
  }
}
.width-90-md {
  @include medium {
    width: 90%;
  }
}
.width-80-sm {
  width: 80%;
  @include medium {
    width: auto;
  }
}
.width-80-md {
  @include medium {
    width: 80%;
  }
}
.width-75-sm {
  width: 75%;
  @include medium {
    width: auto;
  }
}
.width-75-md {
  @include medium {
    width: 75%;
  }
}

/* Base-margin and base-padding */
.base-margin { margin: $base-unit; }
.base-margin-top { margin-top: $base-unit; }
.base-margin-bottom { margin-bottom: $base-unit; }
.base-margin-left { margin-left: $base-unit; }
.base-margin-right { margin-right: $base-unit; }

@for $i from 2 through 5 {
  $base-multiplied: $i * $base-unit;
  .base-margin-x#{$i} { margin: $base-multiplied; }
  .base-margin-top-x#{$i} { margin-top: $base-multiplied; }
  .base-margin-bottom-x#{$i} { margin-bottom: $base-multiplied; }
  .base-margin-left-x#{$i} { margin-left: $base-multiplied; }
  .base-margin-right-x#{$i} { margin-right: $base-multiplied; }
}

.base-padding { padding: $base-unit; }
.base-padding-top { padding-top: $base-unit; }
.base-padding-bottom { padding-bottom: $base-unit; }
.base-padding-left { padding-left: $base-unit; }
.base-padding-right { padding-right: $base-unit; }
.base-padding-sm { padding: 0 $base-unit * 1.8; }

@for $i from 2 through 5 {
  $base-multiplied: $i * $base-unit;
  .base-padding-x#{$i} { padding: $base-multiplied; }
  .base-padding-top-x#{$i} { padding-top: $base-multiplied; }
  .base-padding-bottom-x#{$i} { padding-bottom: $base-multiplied; }
  .base-padding-left-x#{$i} { padding-left: $base-multiplied; }
  .base-padding-right-x#{$i} { padding-right: $base-multiplied; }
}


/* =============================
   Theme utilities
   ============================= */

// Background colours
@mixin background-color-primary {
  background-color: $color-brand-primary;
}

@mixin background-color-secondary {
  background-color: $color-brand-secondary;
}

@mixin background-color-tertiary {
  background-color: $color-brand-tertiary;
}

.background-color-primary {
  @include background-color-primary;
}

.background-color-secondary {
  @include background-color-secondary;
}

.background-color-tertiary {
  @include background-color-tertiary;
}

// Grays
// If you add/remove these grays, don't forget to do the same in _variables.scss#L26
$gray-backgrounds: (
  color-white: $color-white,
  color-gray-5: $color-gray-5,
  color-gray-6: $color-gray-6,
  color-gray-10: $color-gray-10,
  color-gray-15: $color-gray-15,
  color-gray-20: $color-gray-20,
  color-gray-25: $color-gray-25,
  color-gray-30: $color-gray-30,
  color-gray-35: $color-gray-35,
  color-gray-40: $color-gray-40,
  color-gray-50: $color-gray-50,
  color-gray-52: $color-gray-52,
  color-gray-60: $color-gray-60,
  color-gray-65: $color-gray-65,
  color-gray-80: $color-gray-80,
  color-gray-90: $color-gray-90,
  color-gray-95: $color-gray-95,
  color-gray-98: $color-gray-98,
  color-gray-99: $color-gray-99,
  color-black: $color-black
);

@each $key, $value in $gray-backgrounds {
  .background-#{$key} {
    background-color: $value;
  }
}


// Text colours
@mixin text-color-primary {
  color: $color-brand-primary;
}

@mixin text-color-secondary {
  color: $color-brand-secondary;
}

@mixin text-color-tertiary {
  color: $color-brand-tertiary;
}

.text-color-primary {
  @include text-color-primary;
}

.text-color-secondary {
  @include text-color-secondary;
}

.text-color-tertiary {
  @include text-color-tertiary;
}