$border-color:         #f5f5f5 !default;
$under-color:          $text !default;
$under-width:          3px !default;
$border-radius-step:   2px !default;
$utilities-multiplier: 0.5rem !default; // 7.5px
$breakpoints: (
  "none": null,
  "lg": $breakpoint-lg,
  "md": $breakpoint-md,
  "sm": $breakpoint-sm,
  "xs": $breakpoint-xs,
);

/* ---- Borders ---------------------- */

  @each $i in [1, 2, 3, 4, 5] {
    .b-#{$i} {
      border: #{$i}px solid $border-color !important;
    }
    .bl-#{$i} {
      border-left: #{$i}px solid $border-color !important;
    }
    .br-#{$i} {
      border-right: #{$i}px solid $border-color !important;
    }
    .bt-#{$i} {
      border-top: #{$i}px solid $border-color !important;
    }
    .bb-#{$i} {
      border-bottom: #{$i}px solid $border-color !important;
    }
    .bx-#{$i} {
      border-left: #{$i}px solid $border-color !important;
      border-right: #{$i}px solid $border-color !important;
    }
    .by-#{$i} {
      border-top: #{$i}px solid $border-color !important;
      border-bottom: #{$i}px solid $border-color !important;
    }
  }

  /* ---- Border radius -------------- */

  @each $i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 'full'] {
    $size: null;
    @if ($i == 'full') {
      $size: 999px;
    }
    @else {
      $size: $border-radius-step * $i;
    }
    .rounded-#{$i} {
      border-radius: $size !important;
    }
    .rounded-l-#{$i} {
      border-top-left-radius: $size !important;
      border-bottom-left-radius: $size !important;
    }
    .rounded-r-#{$i} {
      border-top-right-radius: $size !important;
      border-bottom-right-radius: $size !important;
    }
    .rounded-t-#{$i} {
      border-top-left-radius: $size !important;
      border-top-right-radius: $size !important;
    }
    .rounded-b-#{$i} {
      border-bottom-left-radius: $size !important;
      border-bottom-right-radius: $size !important;
    }
    .rounded-tl-#{$i} {
      border-top-left-radius: $size !important;
    }
    .rounded-tr-#{$i} {
      border-top-right-radius: $size !important;
    }
    .rounded-bl-#{$i} {
      border-bottom-left-radius: $size !important;
    }
    .rounded-br-#{$i} {
      border-bottom-right-radius: $size !important;
    }
    .rounded-br-#{$i} {
      border-bottom-right-radius: $size !important;
    }
  }

/* ---- Colors & Gradients ----------- */

  @each $name, $color in map-merge($shades, $app-colors) {
    @if (type-of($color) == 'map' or type-of($color) == 'list') {
      $color-invert: nth($color, 2);
      $color: nth($color, 1);
    }
    .text-#{$name} {
      color: $color !important;;
      text-decoration-color: $color !important;;
      fill: $color !important;;
    }
    .bg-#{$name} {
      color: $color !important;;
      fill: $color !important;;
    }
    @if ($name == 'text') {
      .text {
        color: $color !important;;
        text-decoration-color: $color !important;;
        fill: $color !important;;
      }
    }
    @if (variable-exists(color-invert)) {
      .text-#{$name}-invert {
        color: $color-invert !important;;
        text-decoration-color: $color-invert !important;;
        fill: $color-invert !important;
      }
      .bg-#{$name}-invert {
        color: $color-invert !important;;
        fill: $color-invert !important;;
      }
      @if ($name == 'text') {
        .text-invert {
          color: $color-invert !important;;
          text-decoration-color: $color-invert !important;;
          fill: $color-invert !important;;
        }
      }
    }
  }

  @each $name, $gradient in $custom-gradients {
    .bg-#{$name} {
      background-image: linear-gradient($gradient) !important;
    }
  }

/* ---- Display ---------------------- */

  @mixin display($prefix) {
    .#{$prefix}block {
      display: block !important;
    }
    .#{$prefix}inline-block {
      display: inline-block !important;
    }
    .#{$prefix}inline {
      display: inline !important;
    }
    .#{$prefix}flex {
      display: flex !important;
    }
    .#{$prefix}inline-flex {
      display: inline-flex !important;
    }
    .#{$prefix}table {
      display: table !important;
    }
    .#{$prefix}table-caption {
      display: table-caption !important;
    }
    .#{$prefix}table-cell {
      display: table-cell !important;
    }
    .#{$prefix}table-column {
      display: table-column !important;
    }
    .#{$prefix}table-column-group {
      display: table-column-group !important;
    }
    .#{$prefix}table-footer-group {
      display: table-footer-group !important;
    }
    .#{$prefix}table-header-group {
      display: table-header-group !important;
    }
    .#{$prefix}table-row-group {
      display: table-row-group !important;
    }
    .#{$prefix}table-row {
      display: table-row !important;
    }
    .#{$prefix}flow-root {
      display: flow-root !important;
    }
    .#{$prefix}grid {
      display: grid !important;
    }
    .#{$prefix}inline-grid {
      display: inline-grid !important;
    }
    .#{$prefix}contents {
      display: contents !important;
    }
    .#{$prefix}hidden {
      display: none !important;
    }
  }

  @each $key, $width in $breakpoints {
    @if ($width) {
      @media screen and (max-width: $width) { @include display($key + '\\:'); }
    } @else {
      @include display('');
    }
  }

/* ---- Flex ------------------------- */

  .flex-0 {
    flex: 0 !important;
  }
  .flex-1 {
    flex: 1 !important;
  }
  .flex-auto {
    flex: auto !important;
  }
  .flex-initial {
    flex: initial !important; /* can shrink, but not grow i.e flex: 0 */
  }
  .flex-none {
    flex: none !important; /* can't shrink or grow */
  }

  /* Direction */

  .flex-column {
    flex-direction: column !important;
  }
  .flex-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-row {
    flex-direction: row !important;
  }
  .flex-row-reverse {
    flex-direction: row-reverse !important;
  }

  /* Wrap */

  .flex-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-wrap {
    flex-wrap: wrap !important;
  }
  .flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  /* Grow / shrink */

  .flex-grow {
    flex-grow: 1 !important;
  }
  .flex-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-shrink {
    flex-shrink: 1 !important;
  }
  .flex-shrink-0 {
    flex-shrink: 0 !important;
  }

  /* Order */

  @each $i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] {
    .order-#{$i} {
      order: #{$i} !important;
    }
  }
  .order-first {
    order: -9999 !important;
  }
  .order-last {
    order: 9999 !important;
  }
  .order-none {
    order: 0 !important;
  }

  /* Gap */

  @each $i in [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9] {
    $ii: $i;
    @if $i == 0.5 { $ii: '0-5'; }
    @if $i == 1.5 { $ii: '1-5'; }
    @if $i == 2.5 { $ii: '2-5'; }
    .grid-gap-#{$ii} {
      // Not used for cols, please see gap-*
      gap: #{$utilities-multiplier * $i} !important;
    }
    .column-gap-#{$ii} {
      column-gap: #{$utilities-multiplier * $i} !important;
    }
    .row-gap-#{$ii} {
      row-gap: #{$utilities-multiplier * $i} !important;
    }
  }

  /* Justify */

  .justify-center {
    justify-content: center !important;
  }
  .justify-end {
    justify-content: flex-end !important;
  }
  .justify-space-around {
    justify-content: space-around !important;
  }
  .justify-space-between {
    justify-content: space-between !important;
  }
  .justify-space-evenly {
    justify-content: space-evenly !important;
  }
  .justify-start {
    justify-content: flex-start !important;
  }

  .justify-items-center {
    justify-items: center !important;
  }
  .justify-items-end {
    justify-items: flex-end !important;
  }
  .justify-items-start {
    justify-items: flex-start !important;
  }
  .justify-items-stretch {
    justify-items: stretch !important;
  }

  .justify-self-auto {
    justify-self: auto !important;
  }
  .justify-self-center {
    justify-self: center !important;
  }
  .justify-self-end {
    justify-self: flex-end !important;
  }
  .justify-self-start {
    justify-self: flex-start !important;
  }
  .justify-self-stretch {
    justify-self: stretch !important;
  }

  /* Align */

  .align-center {
    align-content: center !important;
  }
  .align-end {
    align-content: flex-end !important;
  }
  .align-space-around {
    align-content: space-around !important;
  }
  .align-space-between {
    align-content: space-between !important;
  }
  .align-space-evenly {
    align-content: space-evenly !important;
  }
  .align-start {
    align-content: flex-start !important;
  }

  .align-items-baseline {
    align-items: baseline !important;
  }
  .align-items-center {
    align-items: center !important;
  }
  .align-items-end {
    align-items: flex-end !important;
  }
  .align-items-start {
    align-items: flex-start !important;
  }
  .align-items-stretch {
    align-items: stretch !important;
  }

  .align-self-auto {
    align-self: auto !important;
  }
  .align-self-center {
    align-self: center !important;
  }
  .align-self-end {
    align-self: flex-end !important;
  }
  .align-self-start {
    align-self: flex-start !important;
  }
  .align-self-stretch {
    align-self: stretch !important;
  }

/* ---- Text weight ------------------ */

  @each $i in [300, 400, 500, 600, 700, 800, 900] {
    .weight-#{$i},
    .text-weight-#{$i} {
      font-weight: $i !important;
    }
  }

/* ---- Text Overflow ---------------- */

  @each $i in [ellipsis, clip] {
    .overflow-#{$i}
    .text-overflow-#{$i} {
      text-overflow: $i !important;
    }
  }
  .truncate,
  .text-truncate {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .truncate1,
  .text-truncate1 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

/* ---- Vertical align --------------- */

  @each $i in [baseline, top, middle, bottom, sub, text-top, text-bottom] {
    .align-#{$i},
    .vertical-align-#{$i} {
      vertical-align: $i !important;
    }
  }

/* ---- Helpers ---------------------- */

  .relative {
    position: relative !important;
  }
  .left {
    float: left !important;
  }
  .right {
    float: right !important;
  }
  .center,
  .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ml-auto {
    margin-left: auto !important;
  }
  .mr-auto {
    margin-right: auto !important;
  }
  .clear {
    clear: both !important;
  }
  .cf:after {
    content: "";
    display: block;
    clear: both;
  }
  .min-0 {
    min-width: 0 !important;
  }
  .no-select {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }
  .text-left {
    text-align: left !important;
  }
  .text-right {
    text-align: right !important;
  }
  .text-center {
    text-align: center !important;
  }
  .cover {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
  }

/* ---- Underline -------------------- */

  .under {
    position: relative;
  }
  .under:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0.25em;
    height: $under-width;
    width: 100%;
    opacity: 0;
    background-color: $under-color;
    transition: transform 0.15s ease, opacity 0.2s ease;
  }
  .under:hover:before,
  .under:focus:before,
  .under.active:before {
    transform: translateY(1px);
    opacity: 1;
  }

/* ---- Vue animations --------------- */

  /* Slide */

  .slide-up-enter-active {
    transition: all 0.2s ease-out;
  }
  .slide-up-leave-active {
    transition: all 0.2s ease-in;
  }
  .slide-up-enter,
  .slide-up-leave-to {
    opacity: 0;
    transform: translateY(-12px);
  }

  /* Fade */

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.15s ease;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0.1;
  }