//
// Utility
// ------------------------------------------------------------

// Clearfix
// --------------------
.clearfix {
  &::before,
  &::after {
    display: table;
    content: " ";
  }

  &::after {
    clear: both;
  }
}

// Text weight
// --------------------
.weight--bold { font-weight: bold !important; }
.weight--normal { font-weight: normal !important; }

@each $prefix in $weight-list {
  .weight--#{$prefix} { font-weight: #{$prefix} !important; }
}

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

// Float
// --------------------
.float--left { float: left !important; }
.float--right { float: right !important; }

// Color
// --------------------
.color--success { color: $success-color !important; }
.color--danger { color: $danger-color !important; }
.color--warning { color: $warning-color !important; }
.color--info { color: $info-color !important; }
.color--muted { color: $gray !important; }

// Background Color
// --------------------
.bg--success { background-color: lighten($success-color, 45%) !important; }
.bg--danger { background-color: lighten($danger-color, 45%) !important; }
.bg--warning { background-color: lighten($warning-color, 45%) !important; }
.bg--info { background-color: lighten($info-color, 45%) !important; }

// Display
// --------------------
.display--block { display: block !important; }
.display--inline-block { display: inline-block !important; }
.display--inline { display: inline !important; }
.display--flex { display: flex !important; }

// Vertical Align
// --------------------
.valign--top { vertical-align: top !important; }
.valign--middle { vertical-align: middle !important; }
.valign--bottom { vertical-align: bottom !important; }

// Margin
// --------------------
@each $prefix in $margin-list {
  .mgn#{$prefix} { margin: #{$prefix}px !important; }
  .mt#{$prefix} { margin-top: #{$prefix}px !important; }
  .mb#{$prefix} { margin-bottom: #{$prefix}px !important; }
  .ml#{$prefix} { margin-left: #{$prefix}px !important; }
  .mr#{$prefix} { margin-right: #{$prefix}px !important; }
  .pdn#{$prefix} { padding: #{$prefix}px !important; }
  .pt#{$prefix} { padding-top: #{$prefix}px !important; }
  .pb#{$prefix} { padding-bottom: #{$prefix}px !important; }
  .pl#{$prefix} { padding-left: #{$prefix}px !important; }
  .pr#{$prefix} { padding-right: #{$prefix}px !important; }
}