.euiControlBar {
  background: $euiControlBarBackground;
  color: $euiControlBarText;
  display: flex;
  flex-direction: column;
  // This large box shadow helps prevent a flicker of dark
  // background when the content is shown and hidden
  box-shadow: inset 0 $euiControlBarInitialHeight 0 $euiControlBarBackground, inset 0 600rem 0 $euiPageBackgroundColor;
  bottom: 0;
  transform: translateY(0);
  height: $euiControlBarInitialHeight;
  max-height: $euiControlBarMaxHeight;

  &--fixed {
    position: fixed;
    z-index: $euiZMask;
  }

  &--absolute {
    position: absolute;
    z-index: $euiZLevel1;
  }

  &--relative {
    position: relative;
  }

  &-isOpen {
    animation-duration: $euiAnimSpeedNormal;
    animation-timing-function: $euiAnimSlightResistance;
    animation-fill-mode: forwards;
  }

  &-isOpen.euiControlBar--large {
    animation-name: euiControlBarOpenPanelLarge;
    height: $euiControlBarMaxHeight;
    bottom: map-get($euiControlBarHeights, 'l') * -1;
  }

  &-isOpen.euiControlBar--medium {
    animation-name: euiControlBarOpenPanelMedium;
    height: map-get($euiControlBarHeights, 'm');
    bottom: map-get($euiControlBarHeights, 'm') * -1;
  }

  &-isOpen.euiControlBar--small {
    animation-name: euiControlBarOpenPanelSmall;
    height: map-get($euiControlBarHeights, 's');
    bottom: map-get($euiControlBarHeights, 's') * -1;
  }
}

.euiControlBar__controls {
  height: $euiControlBarInitialHeight;
  width: 100%;
  display: flex;
  align-items: center;
  overflow-y: hidden; // Ensures the movement of buttons in :focus don't cause scrollbars
  overflow-x: auto;
  padding: 0 $euiSizeM;
}

.euiControlBar__content {
  @include euiScrollBar;
  overflow-y: auto;
  width: 100%;
  height: calc(100% - #{$euiControlBarInitialHeight});
  background-color: $euiPageBackgroundColor;
  animation-name: euiControlBarShowContent;
  animation-duration: $euiAnimSpeedSlow;
  animation-iteration-count: 1;
  animation-timing-function: $euiAnimSlightResistance;
  color: $euiColorDarkestShade;
}

// CONTROL TYPES

.euiControlBar__icon {
  flex-shrink: 0;
  margin-left: $euiSizeS;
  margin-right: $euiSizeS;
}

.euiControlBar__buttonIcon {
  flex-shrink: 0;
  min-width: $euiControlBarInitialHeight;
  min-height: $euiControlBarInitialHeight;
}

.euiControlBar__button {
  flex-shrink: 0;
  border-radius: $euiBorderRadius / 2;
  margin-left: $euiSizeXS;
  font-size: $euiFontSizeS;

  &:enabled:hover {
    transform: none;
    box-shadow: none;
  }

  &:last-child {
    margin-right: $euiSizeXS;
  }
}

.euiControlBar__breadcrumbs {
  .euiBreadcrumb:not(.euiBreadcrumb--last) {
    color: makeHighContrastColor($euiTextSubduedColor, $euiControlBarBackground);
  }

  .euiBreadcrumbSeparator {
    background: $euiControlBarBorderColor;
  }
}

.euiControlBar__spacer {
  flex-grow: 1;
  height: 100%;
}

.euiControlBar__divider {
  flex-shrink: 0;
  height: 100%;
  width: 1px;
  background-color: $euiControlBarBorderColor;
}

.euiControlBar__text {
  @include euiTextTruncate;
  @include euiFontSizeS;
  padding: 0 $euiSizeS;
  color: $euiControlBarText;

  &:last-child {
    padding-right: 0;
  }
}

.euiControlBar__tab {
  @include euiTextTruncate;
  @include euiFontSizeS;
  color: $euiControlBarText;
  padding: 0 $euiSize;
  text-align: center;
  height: 100%;

  &:hover,
  &:focus {
    text-decoration: underline;
    cursor: pointer;
  }

  &.euiControlBar__tab--active {
    background-color: $euiPageBackgroundColor;
    box-shadow: inset 0 4px 0 makeHighContrastColor($euiColorPrimary, $euiColorLightestShade);
    color: makeHighContrastColor($euiColorPrimary, $euiColorLightestShade);
  }
}

@each $colorName, $colorValue in $euiButtonTypes {
  .euiControlBar__controls {
    .euiLink.euiLink--#{$colorName} {
      color: makeHighContrastColor($colorValue, $euiControlBarBackground);

      &:hover {
        color: tintOrShade($colorValue, 30%, 30%);
      }
    }

    .euiLink.euiLink--text {
      color: $euiColorGhost;
    }

    .euiControlBar__button.euiButton--#{$colorName}:enabled {
      box-shadow: none;
    }

    .euiControlBar__button.euiButton--#{$colorName}:enabled:not(.euiButton--fill) {
      color: makeHighContrastColor($colorValue, $euiControlBarBackground);
      border-color: makeHighContrastColor($colorValue, $euiControlBarBackground);
    }

    .euiButtonIcon--#{$colorName} {
      color: makeHighContrastColor($colorValue, $euiControlBarBackground);
    }
  }
}

@include euiBreakpoint('xs', 's') {
  .euiControlBar:not(.euiControlBar--showOnMobile) {
    display: none;
  }
}

@keyframes euiControlBarOpenPanelLarge {
  0% {
    // Accounts for the initial height offset from the top
    transform: translateY(calc((#{$euiControlBarInitialHeight} * 3) * -1));
  }

  100% {
    transform: translateY(map-get($euiControlBarHeights, 'l') * -1);
  }
}

@keyframes euiControlBarOpenPanelMedium {
  0% {
    transform: translateY(-$euiControlBarInitialHeight);
  }

  100% {
    transform: translateY(map-get($euiControlBarHeights, 'm') * -1);
  }
}

@keyframes euiControlBarOpenPanelSmall {
  0% {
    transform: translateY(-$euiControlBarInitialHeight);
  }

  100% {
    transform: translateY(map-get($euiControlBarHeights, 's') * -1);
  }
}

@keyframes euiControlBarShowContent {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}