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

// This file has lots of modifiers and is somewhat nesty by nature because of positioning
// sass-lint:disable nesting-depth

/**
 * 1. The default position of the button should always be `middle`, so
 *    those position styles aren't restricted to a class
 * 2. When collpsed, the button itself is the full collapsed area and we use
 *    flex to align the icon within
 */

.ouiResizableToggleButton {
  @include ouiSlightShadow;
  position: absolute;
  z-index: $ouiZLevel1 + 1;
  // Remove animations from OuiButtonIcon because of the custom transforms
  animation: none !important; // sass-lint:disable-line no-important
  // Remove transition from OuiButtonIcon because of the custom transforms
  transition-property: background, box-shadow;

  &:focus {
    @include ouiSlightShadowHover;
  }

  &-isCollapsed {
    box-shadow: none;
    background: transparent;
    border-radius: 0;
  }

  &:not(:focus):not(:active):not(.ouiResizableToggleButton-isVisible):not(.ouiResizableToggleButton-isCollapsed) {
    @include ouiScreenReaderOnly;
    border-width: 0;
    height: 0;
    width: 0;
  }
}

.ouiResizableToggleButton--horizontal {
  &.ouiResizableToggleButton { // Extra layer of nesting to override OuiButtonIcon transforms on hover
    &.ouiResizableToggleButton--after {
      right: 0;
      top: 50%; /* 1 */
      transform: translate(50%, -50%); /* 1 */

      &.ouiResizableToggleButton--top {
        top: 0;
        transform: translate(50%, $ouiSize);
      }

      &.ouiResizableToggleButton--bottom {
        top: auto;
        bottom: 0;
        transform: translate(50%, -$ouiSize);
      }
    }

    &.ouiResizableToggleButton--before {
      left: 0;
      top: 50%; /* 1 */
      transform: translate(-50%, -50%); /* 1 */

      &.ouiResizableToggleButton--top {
        top: 0;
        transform: translate(-50%, $ouiSize);
      }

      &.ouiResizableToggleButton--bottom {
        top: auto;
        bottom: 0;
        transform: translate(-50%, -$ouiSize);
      }
    }

    &.ouiResizableToggleButton-isCollapsed {
      top: 0 !important; // sass-lint:disable-line no-important
      bottom: 0 !important; // sass-lint:disable-line no-important
      transform: none !important; // sass-lint:disable-line no-important
      height: 100%;

      &.ouiResizableToggleButton--top {
        padding-top: $ouiSize;
        align-items: flex-start;  /* 2 */
      }

      &.ouiResizableToggleButton--bottom {
        padding-bottom: $ouiSize;
        align-items: flex-end;  /* 2 */
      }
    }
  }
}

.ouiResizableToggleButton--vertical {
  &.ouiResizableToggleButton { // Extra layer of nesting to override OuiButtonIcon transforms on hover
    &.ouiResizableToggleButton--after {
      top: 100%;
      left: 50%; /* 1 */
      transform: translate(-50%, -50%); /* 1 */

      &.ouiResizableToggleButton--left {
        left: 0;
        transform: translate($ouiSize, -50%);
      }

      &.ouiResizableToggleButton--right {
        left: auto;
        right: 0;
        transform: translate(-$ouiSize, -50%);
      }
    }

    &.ouiResizableToggleButton--before {
      bottom: 100%;
      left: 50%; /* 1 */
      transform: translate(-50%, 50%); /* 1 */

      &.ouiResizableToggleButton--left {
        left: 0;
        transform: translate($ouiSize, 50%);
      }

      &.ouiResizableToggleButton--right {
        left: auto;
        right: 0;
        transform: translate(-$ouiSize, 50%);
      }
    }

    &.ouiResizableToggleButton-isCollapsed {
      top: 0 !important; // sass-lint:disable-line no-important
      bottom: 0 !important; // sass-lint:disable-line no-important
      left: 0 !important; // sass-lint:disable-line no-important
      transform: none !important; // sass-lint:disable-line no-important
      width: 100%;

      &.ouiResizableToggleButton--left {
        padding-left: $ouiSize;
        justify-content: flex-start; /* 2 */
      }

      &.ouiResizableToggleButton--right {
        padding-right: $ouiSize;
        justify-content: flex-end; /* 2 */
      }
    }
  }
}