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

.euiResizableToggleButton {
  @include euiSlightShadow;
  position: absolute;
  z-index: $euiZLevel1 + 1;
  // Remove animations from EuiButtonIcon because of the custom transforms
  animation: none !important; // sass-lint:disable-line no-important
  // Remove transition from EuiButtonIcon because of the custom transforms
  transition: none !important; // sass-lint:disable-line no-important

  &,
  &:hover,
  &:focus {
    background-color: $euiColorLightestShade;
  }

  &:focus {
    @include euiSlightShadowHover;
    background-color: $euiColorLightShade;
  }

  &-isCollapsed {
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    display: flex; /* 2 */
  }

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

.euiResizableToggleButton--horizontal {
  &.euiResizableToggleButton {
    &.euiResizableToggleButton--after {
      right: 0;
      top: 50%; /* 1 */
      transform: translate(50%, -50%); /* 1 */
      justify-content: center; /* 1, 2 */

      &.euiResizableToggleButton--top {
        top: 0;
        transform: translate(50%, $euiSize);
        justify-content: flex-start; /* 2 */
      }

      &.euiResizableToggleButton--bottom {
        top: auto;
        bottom: 0;
        transform: translate(50%, -$euiSize);
        justify-content: flex-end; /* 2 */
      }
    }

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

      &.euiResizableToggleButton--top {
        top: 0;
        transform: translate(-50%, $euiSize);
        justify-content: flex-start; /* 2 */
      }

      &.euiResizableToggleButton--bottom {
        top: auto;
        bottom: 0;
        transform: translate(-50%, -$euiSize);
        justify-content: flex-end; /* 2 */
      }
    }

    &.euiResizableToggleButton-isCollapsed {
      flex-direction: column;
      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
      // Give some space from the cross edges
      padding-top: $euiSize;
      padding-bottom: $euiSize;
    }
  }
}

.euiResizableToggleButton--vertical {
  &.euiResizableToggleButton {

    &.euiResizableToggleButton--after {
      top: 100%;
      left: 50%; /* 1 */
      transform: translate(-50%, -50%); /* 1 */
      justify-content: center; /* 1, 2 */

      &.euiResizableToggleButton--left {
        left: 0;
        transform: translate($euiSize, -50%);
        justify-content: flex-start; /* 2 */
      }

      &.euiResizableToggleButton--right {
        left: auto;
        right: 0;
        transform: translate(-$euiSize, -50%);
        justify-content: flex-end; /* 2 */
      }
    }

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

      &.euiResizableToggleButton--left {
        left: 0;
        transform: translate($euiSize, 50%);
        justify-content: flex-start; /* 2 */
      }

      &.euiResizableToggleButton--right {
        left: auto;
        right: 0;
        transform: translate(-$euiSize, 50%);
        justify-content: flex-end; /* 2 */
      }
    }

    &.euiResizableToggleButton-isCollapsed {
      flex-direction: row;
      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%;
      // Give some space from the cross edges
      padding-left: $euiSize;
      padding-right: $euiSize;
    }
  }
}