/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
@import "variables";

.nz-widgetPanels-panel {
  position: relative;

  > .nz-grip-container {
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;

    > .nz-grip {
      pointer-events: all;
      position: absolute;
      z-index: 1;
    }
  }

  > .nz-content {
    display: flex;
    position: relative;
    background: $buic-background-2;
  }

  &.nz-transition {
    transition-duration: var(--iui-duration-2);
    transition-timing-function: ease-in;
  }

  &.nz-left,
  &.nz-right {
    max-width: 100%;
    min-height: 0;

    > .nz-content {
      flex-direction: column;
      height: 100%;
      width: 100%;
    }

    > .nz-grip-container {
      top: 0;
      min-width: $nz-grip-width * 0.5;

      > .nz-grip {
        top: 50%;
      }
    }

    &.nz-transition {
      transition-property: width;
    }

    &.nz-span-top {
      grid-row-start: 2;
    }

    &:not(.nz-span-top) {
      grid-row-start: 1;
    }

    &.nz-span-bottom {
      grid-row-end: 3;
    }

    &:not(.nz-span-bottom) {
      grid-row-end: 4;
    }
  }

  &.nz-left {
    grid-column: 1/2;

    > .nz-grip-container {
      left: 0;

      > .nz-grip.nz-grip {
        right: calc(#{$nz-grip-width} * -0.5);
        transform: translate(0, -50%);
      }
    }

    &.nz-transition {
      > .nz-content {
        position: absolute;
        right: 0;
      }
    }

    &.nz-collapsed {
      &.nz-captured {
        &:not(.nz-transition) {
          > .nz-content {
            position: absolute;
            width: unset;
            right: -$nz-grip-width * 0.5;
          }
        }
      }

      > .nz-grip-container > .nz-grip {
        right: 0;
      }
    }
  }

  &.nz-right {
    grid-column: 3/4;

    > .nz-grip-container {
      right: 0;

      > .nz-grip.nz-grip {
        left: calc(#{$nz-grip-width} * -0.5);
        transform: translate(0, -50%);
      }
    }

    > .nz-content {
      left: 0;
    }

    &.nz-collapsed {
      &.nz-captured {
        &:not(.nz-transition) {
          > .nz-content {
            position: absolute;
            width: unset;
            left: -$nz-grip-width * 0.5;
          }
        }
      }

      > .nz-grip-container > .nz-grip {
        left: 0;
      }
    }
  }

  &.nz-top,
  &.nz-bottom {
    max-height: 100%;
    min-width: 0;

    &.nz-transition {
      transition-property: height;
    }

    > .nz-grip-container {
      left: 0;
      min-height: $nz-grip-width * 0.5;

      > .nz-grip {
        left: 50%;
      }
    }

    > .nz-content {
      flex-direction: row;
      width: 100%;
      height: 100%;
    }
  }

  &.nz-top {
    grid-row: 1;

    > .nz-grip-container {
      top: 0;

      > .nz-grip.nz-grip {
        bottom: calc(#{$nz-grip-width} * -0.5);
        transform: translate(-50%, 0);
      }
    }

    &.nz-transition {
      > .nz-content {
        position: absolute;
        bottom: 0;
      }
    }

    &.nz-span {
      grid-column: 1/4;
    }

    &:not(.nz-span) {
      grid-column: 2/3;
    }

    &.nz-collapsed {
      &.nz-captured {
        &:not(.nz-transition) {
          > .nz-content {
            position: absolute;
            height: unset;
            bottom: -$nz-grip-width * 0.5;
          }
        }
      }

      > .nz-grip-container > .nz-grip {
        bottom: 0;
      }
    }
  }

  &.nz-bottom {
    grid-row: 3;

    > .nz-grip-container {
      bottom: 0;

      > .nz-grip {
        top: 0;
        transform: translate(-50%, 0);
      }
    }

    &.nz-span {
      grid-column: 1/4;
    }

    &:not(.nz-span) {
      grid-column: 2/3;
    }

    &.nz-collapsed {
      &.nz-captured {
        &:not(.nz-transition) {
          > .nz-content {
            position: absolute;
            height: unset;
            top: -$nz-grip-width * 0.5;
          }
        }
      }
    }
  }

  &.nz-collapsed {
    > .nz-content {
      overflow: hidden;
    }
  }

  &:not(.nz-collapsed) {
    > .nz-content {
      height: 100%;
      width: 100%;
    }
  }
}