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

/**
 * 1. Default to grid of 3
 */
.ouiKeyPadMenu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: $ouiKeyPadMenuSize * 3;
  max-width: 100%;
}

/**
 * 1. If this class is applied to a button, we need to override the Chrome default font.
 * 2. If it has a BetaBadge, make sure only the first letter shows
 */
.ouiKeyPadMenuItem {
  @include ouiFont; /* 1 */
  // Disable indentation for transition legibility
  // sass-lint:disable-block indentation
  display: block;
  padding: $ouiSizeXS;
  height: $ouiKeyPadMenuSize;
  width: $ouiKeyPadMenuSize;
  color: $ouiColorDarkShade;
  border: $ouiBorderThin;
  border-color: transparent;
  border-radius: $ouiBorderRadius;
  transition:
    border-color $ouiAnimSpeedFast ease-in,
    box-shadow $ouiAnimSpeedFast ease-in;

  &:not(:disabled) {
    &:hover,
    &:focus {
      @include ouiSlightShadow;
      border-color: $ouiBorderColor;

      .ouiKeyPadMenuItem__icon { // sass-lint:disable-line nesting-depth
        transform: translateY(0);
      }
    }

  }

  &:disabled {
    color: $ouiButtonColorDisabledText;
    cursor: not-allowed;

    .ouiKeyPadMenuItem__icon  {
      filter: grayscale(100%);

      svg * { // sass-lint:disable-line nesting-depth
        fill: $ouiButtonColorDisabledText;
      }
    }

  }
}

.ouiKeyPadMenuItem__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .ouiKeyPadMenuItem--hasBetaBadge & {
    position: relative;

    .ouiKeyPadMenuItem__betaBadgeWrapper {
      position: absolute;
      top: $ouiSizeXS;
      right: $ouiSizeS;
      z-index: 3;

      // sass-lint:disable-block nesting-depth
      .ouiKeyPadMenuItem__betaBadge:not(.ouiBetaBadge--iconOnly) {
        padding: 0 calc($ouiSizeM / 2);  /* 2 */
        overflow: hidden;  /* 2 */
        letter-spacing: 3rem;  /* 2 */
      }
    }
  }
}

.ouiKeyPadMenuItem__betaBadge {
  @include size($ouiKeyPadMenuItemBetaBadgeSize);
  line-height: $ouiKeyPadMenuItemBetaBadgeSize;
  color: $ouiColorFullShade;
  background-color: tintOrShade($ouiColorLightShade, 50%, 0%);
  box-shadow: none;

  .ouiBetaBadge__icon {
    @include size($ouiSizeM);
  }
}

.ouiKeyPadMenuItem__icon {
  transition: transform $ouiAnimSpeedNormal $ouiAnimSlightBounce;
  transform: translateY(2px);
  margin-bottom: $ouiSizeM;
}

.ouiKeyPadMenuItem__label {
  font-size: $ouiFontSizeXS;
  font-weight: $ouiFontWeightMedium;
  line-height: $ouiSize;
  text-align: center;
}