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

.nz-widget-stacked {
  $min-height: 200px;

  display: flex;
  max-height: 100%;
  position: relative;

  @include nz-widget-opacity;

  > .nz-primary-grip {
    @include uicore-z-index(widget-grip);
  }

  > .nz-height-expander {
    display: flex;
    flex-direction: column;

    &:after {
      content: '';
      flex: 0 1 $min-height;
    }
  }

  > .nz-content-container {
    flex-grow: 1;
    min-width: 0;
    position: relative;

    pointer-events: auto;

    > .nz-content {
      overflow: hidden;
      height: 100%;
      width: 100%;
      background-color: $nz-widget-background-color;
      border: {
        style: solid;
        width: $nz-widget-border-width;
        color: $nz-widget-border-color;
        radius: $nz-widget-border-radius;
      }
      box-sizing: border-box;
    }

    > .nz-secondary-grip {
      @include uicore-z-index(widget-grip);
    }

    > .nz-content-grip {
      @include uicore-z-index(widget-grip);
    }
  }

  > .nz-tabs-column {
    display: flex;
    flex-direction: column;
    position: relative;

    > .nz-tabs {
      display: flex;
    }

    > .nz-tabs-grip-container {
      position: relative;
      flex-basis: $nz-tab-height * 1.5;
      flex-grow: 1;

      > .nz-tabs-grip {
        @include uicore-z-index(widget-grip);
      }
    }
  }

  > .nz-tab-bar {
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: 0;
    background-color: $buic-background-panel;
    height: 100%;
    width: 100%;
  }

  &.nz-collapsed {
    > .nz-content-container {
      display: none;
    }

    &.nz-bottom-panel-anchor, &.nz-top-panel-anchor {
      display: block;

      > .nz-tabs-column {
        > .nz-tabs-grip-container {
          display: none;
        }
      }

      > .nz-height-expander {
        display: none;
      }

      &.nz-right-anchor {
        > .nz-tabs-column {
          align-items: flex-start;
        }
      }
    }
  }

  &.nz-left-anchor {
    > .nz-tabs-column {
      > .nz-tabs {
        align-items: flex-start;
      }
    }
  }

  &.nz-right-anchor {
    flex-direction: row-reverse;

    > .nz-tabs-column {
      > .nz-tabs {
        align-items: flex-end;
      }
    }
  }

  &.nz-bottom-anchor, &.nz-middle-anchor {
    > .nz-content-container {
      min-height: $nz-widget-min-size;
    }
  }

  &.nz-dragged {
    @include uicore-z-index(dragged-widget);
  }

  &.nz-closed {
    height: 100%;
    align-items: center;

    &.nz-bottom-anchor {
      align-items: flex-end;
    }

    > .nz-primary-grip {
      display: none;
    }

    > .nz-tabs-column {
      > .nz-tabs-grip-container {
        flex-basis: 0;

        > .nz-tabs-grip {
          display: none;
        }
      }
    }

    > .nz-content-container {
      display: none;
    }
  }

  &.nz-fill-zone {
    height: 100%;
  }

  &:not(.nz-floating) {
    > .nz-content-container {
      > .nz-content-grip {
        display: none;
      }
    }
  }

  &.nz-bottom-panel-anchor {
    flex-direction: column-reverse;

    > .nz-content-container {
      > .nz-content {
        border-top-left-radius: 0;
      }


      > .nz-content-grip {
        @include nz-internal-grip-offset(bottom);
      }
    }

    > .nz-tabs-column {
      > .nz-tabs-grip-container {
        > .nz-tabs-grip {
          @include nz-internal-grip-offset(bottom);
        }
      }
    }
  }

  &.nz-top-panel-anchor {
    flex-direction: column;

    > .nz-content-container {
      > .nz-content {
        border-bottom-left-radius: 0;
      }

      > .nz-content-grip {
        @include nz-internal-grip-offset(top);
      }
    }

    > .nz-tabs-column {
      > .nz-tabs-grip-container {
        > .nz-tabs-grip {
          @include nz-internal-grip-offset(top);
        }
      }
    }
  }

  &.nz-bottom-panel-anchor, &.nz-top-panel-anchor {
    height: 100%;

    > .nz-tabs-column {
      flex-direction: row;

      > .nz-tabs {
        flex-direction: row;
      }
    }

    > .nz-height-expander {
      display: none;
    }

    > .nz-content-container {
      min-height: 0;

      > .nz-secondary-grip {
        top: 0;
        @include nz-internal-grip-offset(right);
      }
    }

    > .nz-primary-grip {
      @include nz-internal-grip-offset(left);
    }
  }

  &:not(.nz-bottom-panel-anchor):not(.nz-top-panel-anchor) {
    &.nz-left-anchor {
      > .nz-content-container {
        > .nz-content {
          border-top-right-radius: 0;
        }

        > .nz-content-grip {
          @include nz-internal-grip-offset(left);
        }
      }

      > .nz-tabs-column {
        > .nz-tabs-grip-container {
          > .nz-tabs-grip {
            @include nz-internal-grip-offset(left);
          }
        }
      }
    }

    &.nz-right-anchor {
      > .nz-content-container {
        > .nz-content {
          border-top-left-radius: 0;
        }

        > .nz-content-grip {
          @include nz-internal-grip-offset(right);
        }
      }

      > .nz-tabs-column {
        > .nz-tabs-grip-container {
          > .nz-tabs-grip {
            @include nz-internal-grip-offset(right);
          }
        }
      }
    }

    > .nz-content-container {
      > .nz-secondary-grip {
        @include nz-internal-grip-offset(bottom);
      }

      > .nz-content-grip {
        top: 0;
      }
    }

    > .nz-tabs-column {
      > .nz-tabs {
        flex-direction: column;
      }
    }

    > .nz-primary-grip {
      @include nz-internal-grip-offset(top);
    }
  }
}