//---------------------------------------------------------------------------//
//
// helper.scss
// A series of helper classes to use arbitrarily. Only use a helper class if
// an element/component doesn’t already have a class to which you could
// apply this styling, e.g. if you need to float `.main-nav` left
// then add `float:left;` to
// that ruleset as opposed to adding the `.float--left` class to the markup.
//
//---------------------------------------------------------------------------//


//
// Add/remove floats
//
.float--left  { float: left   !important;  }
.float--right { float: right  !important;  }
.float--none  { float: none   !important;  }
.float--clear { clear: both   !important;  }


//
// Text alignment
//
.alignment--left    { text-align: left    !important; }
.alignment--center  { text-align: center  !important; }
.alignment--right   { text-align: right   !important; }
.alignment--justify { text-align: justify !important; }


//
// Add/remove margins
//
.push           { margin:       $base-spacing!important; }
.push--top      { margin-top:   $base-spacing!important; }
.push--right    { margin-right: $base-spacing!important; }
.push--bottom   { margin-bottom:$base-spacing!important; }
.push--left     { margin-left:  $base-spacing!important; }
.push--ends     { margin-top:   $base-spacing!important; margin-bottom:$base-spacing!important; }
.push--sides    { margin-right: $base-spacing!important; margin-left:  $base-spacing!important; }

.push-half          { margin:       $half-spacing!important; }
.push-half--top     { margin-top:   $half-spacing!important; }
.push-half--right   { margin-right: $half-spacing!important; }
.push-half--bottom  { margin-bottom:$half-spacing!important; }
.push-half--left    { margin-left:  $half-spacing!important; }
.push-half--ends    { margin-top:   $half-spacing!important; margin-bottom:$half-spacing!important; }
.push-half--sides   { margin-right: $half-spacing!important; margin-left:  $half-spacing!important; }

.flush          { margin:       0!important; }
.flush--top     { margin-top:   0!important; }
.flush--right   { margin-right: 0!important; }
.flush--bottom  { margin-bottom:0!important; }
.flush--left    { margin-left:  0!important; }
.flush--ends    { margin-top:   0!important; margin-bottom:0!important; }
.flush--sides   { margin-right: 0!important; margin-left:  0!important; }


//
// Add/remove paddings
//
.soft           { padding:       $base-spacing!important; }
.soft--top      { padding-top:   $base-spacing!important; }
.soft--right    { padding-right: $base-spacing!important; }
.soft--bottom   { padding-bottom:$base-spacing!important; }
.soft--left     { padding-left:  $base-spacing!important; }
.soft--ends     { padding-top:   $base-spacing!important; padding-bottom:$base-spacing!important; }
.soft--sides    { padding-right: $base-spacing!important; padding-left:  $base-spacing!important; }

.soft-half           { padding:       $half-spacing!important; }
.soft-half--top      { padding-top:   $half-spacing!important; }
.soft-half--right    { padding-right: $half-spacing!important; }
.soft-half--bottom   { padding-bottom:$half-spacing!important; }
.soft-half--left     { padding-left:  $half-spacing!important; }
.soft-half--ends     { padding-top:   $half-spacing!important; padding-bottom:$half-spacing!important; }
.soft-half--sides    { padding-right: $half-spacing!important; padding-left:  $half-spacing!important; }

.hard           { padding:       0!important; }
.hard--top      { padding-top:   0!important; }
.hard--right    { padding-right: 0!important; }
.hard--bottom   { padding-bottom:0!important; }
.hard--left     { padding-left:  0!important; }
.hard--ends     { padding-top:   0!important; padding-bottom:0!important; }
.hard--sides    { padding-right: 0!important; padding-left:  0!important; }


.inherit-color { color: inherit !important; }

//
// Add a help cursor to any element that gives the user extra information on
// `:hover`.
//
.informative {
  border-bottom: 1px dotted $base-link-color;
  color: $base-link-color;
  cursor: pointer;
}


//
// Mute an object by reducing its opacity.
//
.muted {
    opacity: 0.5!important;
}

//
// Centers an object, if the object and the wrapper object has a specific width.
//
.center{
  display: block !important;
  margin: 0 auto !important;
  float: none !important;
}

.force-color-inheritance {
  color: inherit !important;
}

.blockify {
  display: block !important;
}


//
// Change capitalization of text
//
.to-upper {
  text-transform: uppercase;
}

.to-lower {
  text-transform: lowercase;
}

.to-capitalize {
  text-transform: capitalize;
}

.fs-italic {
  font-style: italic;
}

@for $i from 5 through 15  {
  $fs: $i / 10;

  @if $i < 10 {
    .fs-0#{$i} {
      font-size: #{$fs}em;
    }
  }
  @else {
    .fs-#{$i} {
      font-size: #{$fs}em;
    }
  }
}

// helper-classes fw-100 - fw-800 for font-weight
@for $i from 1 through 8 {
  $fw: $i * 100;

  .fw-#{$fw} {
    font-weight: $fw;
  }
}
