/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiControlBar {
  background: $ouiControlBarBackground;
  color: $ouiControlBarText;
  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 $ouiControlBarInitialHeight 0 $ouiControlBarBackground, inset 0 600rem 0 $ouiPageBackgroundColor;
  bottom: 0;
  transform: translateY(0);
  height: $ouiControlBarInitialHeight;
  max-height: $ouiControlBarMaxHeight;

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

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

  &--relative {
    position: relative;
  }

  &-isOpen {
    animation-duration: $ouiAnimSpeedNormal;
    animation-timing-function: $ouiAnimSlightResistance;
    animation-fill-mode: forwards;
  }

  &-isOpen.ouiControlBar--large {
    animation-name: ouiControlBarOpenPanelLarge;
    height: $ouiControlBarMaxHeight;
    bottom: map-get($ouiControlBarHeights, 'l') * -1;
  }

  &-isOpen.ouiControlBar--medium {
    animation-name: ouiControlBarOpenPanelMedium;
    height: map-get($ouiControlBarHeights, 'm');
    bottom: map-get($ouiControlBarHeights, 'm') * -1;
  }

  &-isOpen.ouiControlBar--small {
    animation-name: ouiControlBarOpenPanelSmall;
    height: map-get($ouiControlBarHeights, 's');
    bottom: map-get($ouiControlBarHeights, 's') * -1;
  }
}

.ouiControlBar__controls {
  height: $ouiControlBarInitialHeight;
  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 $ouiSizeM;
}

.ouiControlBar__content {
  @include ouiScrollBar;
  overflow-y: auto;
  width: 100%;
  height: calc(100% - #{$ouiControlBarInitialHeight});
  background-color: $ouiPageBackgroundColor;
  animation-name: ouiControlBarShowContent;
  animation-duration: $ouiAnimSpeedSlow;
  animation-iteration-count: 1;
  animation-timing-function: $ouiAnimSlightResistance;
  color: $ouiColorDarkestShade;
}

// CONTROL TYPES

.ouiControlBar__icon {
  flex-shrink: 0;
  margin-left: $ouiSizeS;
  margin-right: $ouiSizeS;
}

.ouiControlBar__buttonIcon {
  flex-shrink: 0;
  min-width: $ouiControlBarInitialHeight;
  min-height: $ouiControlBarInitialHeight;
}

.ouiControlBar__button {
  flex-shrink: 0;
  border-radius: $ouiBorderRadius / 2;
  margin-left: $ouiSizeXS;
  font-size: $ouiFontSizeS;

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

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

.ouiControlBar__breadcrumbs {
  .ouiBreadcrumb:not(.ouiBreadcrumb--last) {
    color: makeHighContrastColor($ouiTextSubduedColor, $ouiControlBarBackground);
  }

  .ouiBreadcrumbSeparator {
    background: $ouiControlBarBorderColor;
  }
}

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

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

.ouiControlBar__text {
  @include ouiTextTruncate;
  @include ouiFontSizeS;
  padding: 0 $ouiSizeS;
  color: $ouiControlBarText;

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

.ouiControlBar__tab {
  @include ouiTextTruncate;
  @include ouiFontSizeS;
  color: $ouiControlBarText;
  padding: 0 $ouiSize;
  text-align: center;
  height: 100%;

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

  &.ouiControlBar__tab--active {
    background-color: $ouiPageBackgroundColor;
    box-shadow: inset 0 4px 0 makeHighContrastColor($ouiColorPrimary, $ouiColorLightestShade);
    color: makeHighContrastColor($ouiColorPrimary, $ouiColorLightestShade);
  }
}

@each $colorName, $colorValue in $ouiButtonTypes {
  .ouiControlBar__controls {
    .ouiLink.ouiLink--#{$colorName} {
      color: makeHighContrastColor($colorValue, $ouiControlBarBackground);

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

    .ouiLink.ouiLink--text {
      color: $ouiColorGhost;
    }

    .ouiControlBar__button.ouiButton--#{$colorName}:enabled {
      box-shadow: none;
    }

    .ouiControlBar__button.ouiButton--#{$colorName}:enabled:not(.ouiButton--fill) {
      color: makeHighContrastColor($colorValue, $ouiControlBarBackground);
      border-color: makeHighContrastColor($colorValue, $ouiControlBarBackground);
    }

    .ouiButtonIcon--#{$colorName} {
      color: makeHighContrastColor($colorValue, $ouiControlBarBackground);
    }
  }
}

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

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

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

@keyframes ouiControlBarOpenPanelMedium {
  0% {
    transform: translateY(-$ouiControlBarInitialHeight);
  }

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

@keyframes ouiControlBarOpenPanelSmall {
  0% {
    transform: translateY(-$ouiControlBarInitialHeight);
  }

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

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

  100% {
    opacity: 1;
  }
}