// This file utilizes !importants on purpose
// sass-lint:disable no-important

// Vertical alignment
.eui-alignBaseline { vertical-align: baseline !important; }
.eui-alignBottom { vertical-align: bottom !important; }
.eui-alignMiddle { vertical-align: middle !important; }
.eui-alignTop { vertical-align: top !important; }

// Display
.eui-displayBlock {display: block !important;}
.eui-displayInline {display: inline !important;}
.eui-displayInlineBlock {display: inline-block !important;}

.eui-fullWidth {
  display: block !important;
  width: 100% !important;
}

// Text
.eui-textCenter {text-align: center !important;}
.eui-textLeft {text-align: left !important;}
.eui-textRight {text-align: right !important;}
.eui-textNoWrap {white-space: nowrap !important;}
.eui-textInheritColor {color: inherit !important;}

.eui-textBreakWord {
  @include euiTextBreakWord;
}

.eui-textBreakAll {
  overflow-wrap: break-word !important; // Fixes FF when dashes are involved #2288
  word-break: break-all !important;
}

.eui-textBreakNormal {
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  word-break: normal !important;
}

// TODO: 7/23 DEPRECATE in favor of .eui-textBreakWord now that it's working as intended
.eui-textOverflowWrap {
  @include internetExplorerOnly {
    word-break: break-all !important;
  }
  overflow-wrap: break-word !important;
}

.eui-textTruncate {
  @include euiTextTruncate;
}

/**
 *  Responsive
 *
 *  1. Be sure to hide the element initially
 */

[class*='eui-showFor'] {
  display: none !important; /* 1 */
}

@each $size in $euiBreakpointKeys {
  .eui-hideFor--#{$size} {
    @include euiBreakpoint($size) { display: none !important; }
  }

  .eui-showFor--#{$size} {
    @include  euiBreakpoint($size) { display: inline !important; }
  }

  .eui-showFor--#{$size}--block {
    @include  euiBreakpoint($size) { display: block !important; }
  }

  .eui-showFor--#{$size}--inlineBlock {
    @include  euiBreakpoint($size) { display: inline-block !important; }
  }

  .eui-showFor--#{$size}--flex {
    @include  euiBreakpoint($size) { display: flex !important; }
  }
}

/**
  * IE doesn't properly wrap groups if it is within a flex-item of a flex-group.
  * Adding the following styles to the flex-item that contains the wrapping group, will fix IE.
  * https://github.com/philipwalton/flexbugs/issues/104
  */
.euiIEFlexWrapFix {
  @include internetExplorerOnly {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
  }
}

/**
  * Overflow scrolling
  */
.eui-yScroll {
  @include euiYScroll;
}

.eui-xScroll {
  @include euiXScroll;
}

/**
  * Overflow scrolling with shadows
  */
.eui-yScrollWithShadows {
  @include euiYScrollWithShadows;
}

.eui-xScrollWithShadows {
  @include euiXScrollWithShadows;
}

// TODO: 10/22 DEPRECATE in favor of the correctly formatted class .eui-yScrollWithShadows
.euiYScrollWithShadows {
  @include euiYScrollWithShadows;
}

/**
  * Forcing focus ring on non-EUI elements
  */
.eui-isFocusable:focus {
  @include euiFocusRing('large');
}