// Layout
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
// stylelint-disable block-closing-brace-newline-before, block-opening-brace-newline-after
// stylelint-disable rule-non-nested-empty-line-before

// position utilites
.position-static   { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }

.top-0    { top: 0 !important; }
.right-0  { right: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0   { left: 0 !important; }

// Vertical alignment
.v-align-middle      { vertical-align: middle !important; }
.v-align-top         { vertical-align: top !important; }
.v-align-bottom      { vertical-align: bottom !important; }
.v-align-text-top    { vertical-align: text-top !important; }
.v-align-text-bottom { vertical-align: text-bottom !important; }

// Overflow utilities
// overflow-hidden can also be used to create a new
// block formatting context or clear floats.
.overflow-hidden { overflow: hidden !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-auto   { overflow: auto !important; }

// Clear floats
.clearfix {
  @include clearfix;
}

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

// Responsive float utlities
// .float-md-left, .float-lg-right, ...
@each $breakpoint in map-keys($breakpoints) {
  @include breakpoint($breakpoint) {
    .float-#{$breakpoint}-left  { float: left !important; }
    .float-#{$breakpoint}-right  { float: right !important; }
  }
}

// Width and height utilities, helpful in combination
// with display-table utilities and images
.width-fit   { max-width: 100% !important; }
.width-full  { width: 100% !important; }
.height-full { height: 100% !important; }

// Remove min-width from element
.min-width-0 { min-width: 0 !important; }

// Visibility utilities
.v-hidden { visibility: hidden !important; }
.v-visible { visibility: visible !important; }

// Display utilites
.d-table      { display: table !important; }
.d-table-cell { display: table-cell !important; }
.table-fixed { table-layout: fixed !important; }

.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-none         { display: none !important; }

// Responsive display utlities
// .d-sm-none, .d-lg-inline, ...
@each $breakpoint in map-keys($breakpoints) {
  @include breakpoint($breakpoint) {
    .d-#{$breakpoint}-table      { display: table !important; }
    .d-#{$breakpoint}-table-cell { display: table-cell !important; }
    .d-#{$breakpoint}-block  { display: block !important; }
    .d-#{$breakpoint}-inline  { display: inline !important; }
    .d-#{$breakpoint}-inline-block  { display: inline-block !important; }
    .d-#{$breakpoint}-none  { display: none !important; }
  }
}

// Hide utilities for each breakpoint
// Each hide utility only applies to one breakpoint range.
@media (max-width: $width-sm) {
  .hide-sm {
    display: none !important;
  }
}

@media (min-width: $width-sm) and (max-width: $width-md) {
  .hide-md {
    display: none !important;
  }
}

@media (min-width: $width-md) and (max-width: $width-lg) {
  .hide-lg {
    display: none !important;
  }
}

@media (min-width: $width-lg) {
  .hide-xl {
    display: none !important;
  }
}