// This file has lots of modifiers and is somewhat nesty by nature because of positioning
// stylelint-disable max-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
 */

.euiResizableToggleButton {
  @include euiSlightShadow;
  position: absolute;
  z-index: 2;
  // Remove animations from EuiButtonIcon because of the custom transforms
  animation: none !important; // stylelint-disable-line declaration-no-important
  // Remove transition from EuiButtonIcon because of the custom transforms
  transition-property: background, box-shadow;
  background: $euiColorEmptyShade;

  &:focus {
    @include euiSlightShadowHover;
  }

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

  &:not(:focus):not(:active):not(.euiResizableToggleButton-isVisible):not(.euiResizableToggleButton-isCollapsed) {
    @include euiScreenReaderOnly;
  }
}

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

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

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

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

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

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

    &.euiResizableToggleButton-isCollapsed {
      top: 0 !important; // stylelint-disable-line declaration-no-important
      bottom: 0 !important; // stylelint-disable-line declaration-no-important
      transform: none !important; // stylelint-disable-line declaration-no-important
      height: 100%;

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

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

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

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

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

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

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

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

    &.euiResizableToggleButton-isCollapsed {
      top: 0 !important; // stylelint-disable-line declaration-no-important
      bottom: 0 !important; // stylelint-disable-line declaration-no-important
      left: 0 !important; // stylelint-disable-line declaration-no-important
      transform: none !important; // stylelint-disable-line declaration-no-important
      width: 100%;

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

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