/* ============================================================================
   @UTILITIES -> OVERFLOW
   ========================================================================= */


/**
 * Apply different overflow treatment to elements i.e. when to clip content.
 *
 * All the utilities (available as silent placeholder selectors also):
 *
   .u-overflow-visible
   .u-overflow-x-visible
   .u-overflow-y-visible
   .u-overflow-hidden
   .u-overflow-x-hidden
   .u-overflow-y-hidden
   .u-overflow-scroll
   .u-overflow-x-scroll
   .u-overflow-y-scroll
   .u-overflow-auto
   .u-overflow-x-auto
   .u-overflow-y-auto
   .u-overflow-inherit
   .u-overflow-x-inherit
   .u-overflow-y-inherit
 */


/**
 * Settings.
 */

/**
 * Apply at these breakpoints (turned off by default).
 */

$u-overflow-apply-at-breakpoints:                  $default-breakpoints !default;

// From the above breakpoints choose which utilities you wish to apply it too
$u-overflow-apply-at-breakpointa-for-visible:      false !default;

$u-overflow-apply-at-breakpointa-for-visible-x:    false !default;

$u-overflow-apply-at-breakpointa-for-visible-y:    false !default;

$u-overflow-apply-at-breakpointa-for-hidden:       false !default;

$u-overflow-apply-at-breakpointa-for-hidden-x:     false !default;

$u-overflow-apply-at-breakpointa-for-hidden-y:     false !default;

$u-overflow-apply-at-breakpointa-for-scroll:       false !default;

$u-overflow-apply-at-breakpointa-for-scroll-x:     false !default;

$u-overflow-apply-at-breakpointa-for-scroll-y:     false !default;

$u-overflow-apply-at-breakpointa-for-auto:         false !default;

$u-overflow-apply-at-breakpointa-for-auto-x:       false !default;

$u-overflow-apply-at-breakpointa-for-auto-y:       false !default;

$u-overflow-apply-at-breakpointa-for-inherit:      false !default;

$u-overflow-apply-at-breakpointa-for-inherit-x:    false !default;

$u-overflow-apply-at-breakpointa-for-inherit-y:    false !default;


/**
 * Visible.
 */

%u-overflow-visible,
.u-overflow-visible {
  overflow: visible !important;
}

@if $u-overflow-apply-at-breakpointa-for-visible {
  @include generate-at-breakpoints('.u-overflow-visible',
    $u-overflow-apply-at-breakpoints) {
    overflow: visible !important;
  }
}

// At the left and right edges
%u-overflow-x-visible,
.u-overflow-x-visible {
  overflow-x: visible !important;
}

@if $u-overflow-apply-at-breakpointa-for-visible-x {
  @include generate-at-breakpoints('.u-overflow-x-visible',
    $u-overflow-apply-at-breakpoints) {
    overflow-x: visible !important;
  }
}

// At the bottom and top edges
%u-overflow-y-visible,
.u-overflow-y-visible {
  overflow-y: visible !important;
}

@if $u-overflow-apply-at-breakpointa-for-visible-y {
  @include generate-at-breakpoints('.u-overflow-y-visible',
    $u-overflow-apply-at-breakpoints) {
    overflow-y: visible !important;
  }
}


/**
 * Hidden.
 */

%u-overflow-hidden,
.u-overflow-hidden {
  overflow: hidden !important;
}

@if $u-overflow-apply-at-breakpointa-for-hidden {
  @include generate-at-breakpoints('.u-overflow-hidden',
    $u-overflow-apply-at-breakpoints) {
    overflow: hidden !important;
  }
}

// At the left and right edges
%u-overflow-x-hidden,
.u-overflow-x-hidden {
  overflow-x: hidden !important;
}

@if $u-overflow-apply-at-breakpointa-for-hidden-x {
  @include generate-at-breakpoints('.u-overflow-x-hidden',
    $u-overflow-apply-at-breakpoints) {
    overflow-x: hidden !important;
  }
}

// At the bottom and top edges
%u-overflow-y-hidden,
.u-overflow-y-hidden {
  overflow-y: hidden !important;
}

@if $u-overflow-apply-at-breakpointa-for-hidden-y {
  @include generate-at-breakpoints('.u-overflow-y-hidden',
    $u-overflow-apply-at-breakpoints) {
    overflow-y: hidden !important;
  }
}


/**
 * Scroll.
 */

%u-overflow-scroll,
.u-overflow-scroll {
  overflow: scroll !important;
}

@if $u-overflow-apply-at-breakpointa-for-scroll {
  @include generate-at-breakpoints('.u-overflow-scroll',
    $u-overflow-apply-at-breakpoints) {
    overflow: scroll !important;
  }
}

// At the left and right edges
%u-overflow-x-scroll,
.u-overflow-x-scroll {
  overflow-x: scroll !important;
}

@if $u-overflow-apply-at-breakpointa-for-scroll-x {
  @include generate-at-breakpoints('.u-overflow-x-scroll',
    $u-overflow-apply-at-breakpoints) {
    overflow-x: scroll !important;
  }
}

// At the bottom and top edges
%u-overflow-y-scroll,
.u-overflow-y-scroll {
  overflow-y: scroll !important;
}

@if $u-overflow-apply-at-breakpointa-for-scroll-y {
  @include generate-at-breakpoints('.u-overflow-y-scroll',
    $u-overflow-apply-at-breakpoints) {
    overflow-y: scroll !important;
  }
}


/**
 * Auto.
 */

%u-overflow-auto,
.u-overflow-auto {
  overflow: auto !important;
}

@if $u-overflow-apply-at-breakpointa-for-auto {
  @include generate-at-breakpoints('.u-overflow-auto',
    $u-overflow-apply-at-breakpoints) {
    overflow: auto !important;
  }
}

// At the left and right edges
%u-overflow-x-auto,
.u-overflow-x-auto {
  overflow-x: auto !important;
}

@if $u-overflow-apply-at-breakpointa-for-auto-x {
  @include generate-at-breakpoints('.u-overflow-x-auto',
    $u-overflow-apply-at-breakpoints) {
    overflow-x: auto !important;
  }
}

// At the bottom and top edges
%u-overflow-y-auto,
.u-overflow-y-auto {
  overflow-y: auto !important;
}

@if $u-overflow-apply-at-breakpointa-for-auto-y {
  @include generate-at-breakpoints('.u-overflow-y-auto',
    $u-overflow-apply-at-breakpoints) {
    overflow-y: auto !important;
  }
}


/**
 * Inherit.
 */

%u-overflow-inherit,
.u-overflow-inherit {
  overflow: inherit !important;
}

@if $u-overflow-apply-at-breakpointa-for-inherit {
  @include generate-at-breakpoints('.u-overflow-inherit',
    $u-overflow-apply-at-breakpoints) {
    overflow: inherit !important;
  }
}

// At the left and right edges
%u-overflow-x-inherit,
.u-overflow-x-inherit {
  overflow-x: inherit !important;
}

@if $u-overflow-apply-at-breakpointa-for-inherit-x {
  @include generate-at-breakpoints('.u-overflow-x-inherit',
    $u-overflow-apply-at-breakpoints) {
    overflow-x: inherit !important;
  }
}

// At the bottom and top edges
%u-overflow-y-inherit,
.u-overflow-y-inherit {
  overflow-y: inherit !important;
}

@if $u-overflow-apply-at-breakpointa-for-inherit-y {
  @include generate-at-breakpoints('.u-overflow-y-inherit',
    $u-overflow-apply-at-breakpoints) {
    overflow-y: inherit !important;
  }
}