// Layout // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before

/* Position */ @each $breakpoint, $variant in $responsive-variants {

@include breakpoint($breakpoint) {
  @each $position in $responsive-positions {
    .position#{$variant}-#{$position} {
      position: $position !important;
    }
  }
}

}

/* Final position */ @each $breakpoint, $variant in $responsive-variants {

@include breakpoint($breakpoint) {
  .top#{$variant}-0 {
    top: 0 !important;
  }
  .right#{$variant}-0 {
    right: 0 !important;
  }
  .bottom#{$variant}-0 {
    bottom: 0 !important;
  }
  .left#{$variant}-0 {
    left: 0 !important;
  }
  .top#{$variant}-auto {
    top: auto !important;
  }
  .right#{$variant}-auto {
    right: auto !important;
  }
  .bottom#{$variant}-auto {
    bottom: auto !important;
  }
  .left#{$variant}-auto {
    left: auto !important;
  }
}

}

/* Vertical align middle */ .v-align-middle {

vertical-align: middle !important;

} /* Vertical align top */ .v-align-top {

vertical-align: top !important;

} /* Vertical align bottom */ .v-align-bottom {

vertical-align: bottom !important;

} /* Vertical align to the top of the text */ .v-align-text-top {

vertical-align: text-top !important;

} /* Vertical align to the bottom of the text */ .v-align-text-bottom {

vertical-align: text-bottom !important;

} /* Vertical align to the parent's baseline */ .v-align-baseline {

vertical-align: baseline !important;

}

// Overflow utilities @each $breakpoint, $variant in $responsive-variants {

@include breakpoint($breakpoint) {
  @each $overflow in (visible, hidden, auto, scroll) {
    .overflow#{$variant}-#{$overflow} {
      overflow: $overflow !important;
    }
    .overflow#{$variant}-x-#{$overflow} {
      overflow-x: $overflow !important;
    }
    .overflow#{$variant}-y-#{$overflow} {
      overflow-y: $overflow !important;
    }
  }
}

}

// Clear floats /* Clear floats around the element */ .clearfix {

@include clearfix;

}

// Floats @each $breakpoint, $variant in $responsive-variants {

@include breakpoint($breakpoint) {
  /* Float to the left */
  .float#{$variant}-left {
    float: left !important;
  }
  /* Float to the right */
  .float#{$variant}-right {
    float: right !important;
  }
  /* No float */
  .float#{$variant}-none {
    float: none !important;
  }
}

}

// Width and height utilities, helpful in combination // with display-table utilities and images /* Max width 100% */ .width-fit {

max-width: 100% !important;

} /* Set the width to 100% */ .width-full {

width: 100% !important;

} /* Max height 100% */ .height-fit {

max-height: 100% !important;

} /* Set the height to 100% */ .height-full {

height: 100% !important;

}

/* Remove min-width from element */ .min-width-0 {

min-width: 0 !important;

}

@each $breakpoint, $variant in $responsive-variants {

@include breakpoint($breakpoint) {
  // Auto varients
  .width#{$variant}-auto {
    width: auto !important;
  }

  /* Set the direction to rtl */
  .direction#{$variant}-rtl {
    direction: rtl !important;
  }
  /* Set the direction to ltr */
  .direction#{$variant}-ltr {
    direction: ltr !important;
  }
}

}