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

@mixin ouiPanel($selector) {
  @if variable-exists(selector) == false {
    @error 'A $selector must be provided to @mixin ouiPanel().';
  } @else {
    #{$selector} {
      background-color: $ouiColorEmptyShade;
      border: $ouiBorderThin;
      border-radius: $ouiBorderRadius;
      flex-grow: 1;

      &#{$selector}--flexGrowZero {
        flex-grow: 0;
      }

      &#{$selector}--noBorder {
        border: none;
      }

      &#{$selector}--hasShadow {
        @include ouiBottomShadowSmall;
        border: $ouiBorderThin;
      }

      &#{$selector}--isClickable {
        // transition the shadow
        transition: all $ouiAnimSpeedFast $ouiAnimSlightResistance;

        &:enabled { // This is a good selector for buttons since it doesn't exist on divs
          // in case of button wrapper which inherently is inline-block and no width
          display: block;
          width: 100%;
          text-align: left;
        }

        &:hover,
        &:focus {
          @include ouiSlightShadowHover;
          transform: translateY(-2px);
          cursor: pointer;
        }
      }

      // Border Radius
      @each $modifier, $amount in $ouiPanelBorderRadiusModifiers {
        &#{$selector}--#{$modifier} {
          border-radius: $amount;
        }
      }

      // Background colors
      @each $modifier, $color in $ouiPanelBackgroundColorModifiers {
        &#{$selector}--#{$modifier} {
          background-color: $color;
        }
      }
    }
  }
}


/* OUI -> EUI Aliases */
@mixin euiPanel($selector) { @include ouiPanel($selector); }
/* End of Aliases */