/*!
 * 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.
 */

.ouiContextMenuPanel {
  width: 100%;
  visibility: visible;
  outline-offset: -$ouiFocusRingSize;

  &:focus {
    outline: none; // Hide focus ring because of `tabindex=-1` on Safari
  }

  &.ouiContextMenuPanel-txInLeft {
    pointer-events: none;
    animation: ouiContextMenuPanelTxInLeft $ouiAnimSpeedNormal $ouiAnimSlightResistance;
  }

  &.ouiContextMenuPanel-txOutLeft {
    pointer-events: none;
    animation: ouiContextMenuPanelTxOutLeft $ouiAnimSpeedNormal $ouiAnimSlightResistance;
  }

  &.ouiContextMenuPanel-txInRight {
    pointer-events: none;
    animation: ouiContextMenuPanelTxInRight $ouiAnimSpeedNormal $ouiAnimSlightResistance;
  }

  &.ouiContextMenuPanel-txOutRight {
    pointer-events: none;
    animation: ouiContextMenuPanelTxOutRight $ouiAnimSpeedNormal $ouiAnimSlightResistance;
  }
}

.ouiContextMenuPanel--next {
  transform: translateX($ouiContextMenuWidth);
  visibility: hidden;
}

.ouiContextMenuPanel--previous {
  transform: translateX(-$ouiContextMenuWidth);
  visibility: hidden;
}

.ouiContextMenuPanelTitle {
  @include ouiPopoverTitle;
  padding: $ouiSizeM;
  width: 100%;
  text-align: left;
  outline-offset: -$ouiFocusRingSize;

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

  &--small {
    @include ouiPopoverTitle('s');
    padding: ($ouiSizeS * .75) $ouiSizeS;
  }
}

@keyframes ouiContextMenuPanelTxInLeft {
  0% {
    transform: translateX($ouiContextMenuWidth);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes ouiContextMenuPanelTxOutLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-$ouiContextMenuWidth);
  }
}

@keyframes ouiContextMenuPanelTxInRight {
  0% {
    transform: translateX(-$ouiContextMenuWidth);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes ouiContextMenuPanelTxOutRight {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX($ouiContextMenuWidth);
  }
}