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

// Mimics the "grab" icon with CSS psuedo-elements.
// The "grab" icon transforms into a 2px straight line on :hover and :focus.
.ouiResizableButton {
  position: relative;
  flex-shrink: 0;
  z-index: $ouiZLevel1;

  &:before,
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: $ouiColorDarkestShade;
    transition: (
      width $ouiResizableButtonTransitionSpeed ease,
      height $ouiResizableButtonTransitionSpeed ease,
      transform $ouiResizableButtonTransitionSpeed ease,
      background-color $ouiResizableButtonTransitionSpeed ease
    );
  }

  &.ouiResizableButton--horizontal {
    cursor: col-resize;
    width: $ouiResizableButtonSize;
    margin-left: calc(-1 * $ouiResizableButtonSize / 2);
    margin-right: calc(-1 * $ouiResizableButtonSize / 2);

    &:before,
    &:after {
      width: 1px;
      height: $ouiSizeM;
    }

    &:before {
      transform: translate(-2px, -50%);
    }

    &:after {
      transform: translate(1px, -50%);
    }
  }

  &.ouiResizableButton--vertical {
    cursor: row-resize;
    height: $ouiResizableButtonSize;
    margin-top: calc(-1 * $ouiResizableButtonSize / 2);
    margin-bottom: calc(-1 * $ouiResizableButtonSize / 2);

    &:before,
    &:after {
      width: $ouiSizeM;
      height: 1px;
    }

    &:before {
      transform: translate(-50%, -2px);
    }

    &:after {
      transform: translate(-50%, 1px);
    }
  }

  //Lighten the "grab" icon on :hover
  &:hover:not(:disabled) {
    &:before,
    &:after {
      background-color: $ouiColorMediumShade;
      transition-delay: $ouiResizableButtonTransitionSpeed; //Delay transition on hover so animation is not accidentally triggered on mouse over
    }
  }

  //Add a transparent background to the container and emphasis the "grab" icon with primary color on :focus
  &:focus:not(:disabled) {
    background-color: transparentize($ouiColorPrimary, .9);

    &:before,
    &:after {
      background-color: $ouiColorPrimary;
      // Overrides default transition so that "grab" icon background-color doesn't animate
      transition: (
        width $ouiResizableButtonTransitionSpeed ease,
        height $ouiResizableButtonTransitionSpeed ease,
        transform $ouiResizableButtonTransitionSpeed ease
      );
      transition-delay: calc($ouiResizableButtonTransitionSpeed / 2);
    }
  }

  //Morph the "grab" icon into a fluid 2px straight line on :hover and :focus
  &:hover:not(:disabled),
  &:focus:not(:disabled) {
    &.ouiResizableButton--horizontal {
      &:before,
      &:after {
        height: 100%;
      }

      &:before {
        transform: translate(-1px, -50%);
      }

      &:after {
        transform: translate(0, -50%);
      }
    }

    &.ouiResizableButton--vertical {
      &:before,
      &:after {
        width: 100%;
      }

      &:before {
        transform: translate(-50%, -1px);
      }

      &:after {
        transform: translate(-50%, 0);
      }
    }
  }

  &:disabled {
    display: none !important; // sass-lint:disable-line no-important
  }
}