$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;
}