/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "./tools/button/variables";
@import "../widgetopacity";

.nz-widget-navigationArea {
  transition: visibility 0.5s ease, opacity 0.5s ease;

  &.nz-hidden {
    opacity: 0;
    visibility: hidden;
  }

  display: grid;
  box-sizing: border-box;
  height: 100%;
  grid-gap: 6px;
  grid-column: 2;
  grid-template-columns: 1fr minmax($mls-navigation-aid-width, auto);
  grid-template-rows: minmax($mls-navigation-aid-width, auto) 1fr;
  justify-items: end;
  grid-template-areas: "htools button"". vtools";

    > .nz-navigation-aid-container {
      margin-bottom: 6px;
      pointer-events: auto;
      @include nz-widget-opacity;
      grid-area: button;
    }

    > .nz-vertical-toolbar-container {
      grid-area: vtools;
      height: calc(100% - 60px);
      display: inline-flex;
      flex-direction: column;
      align-items: flex-end;
      @include nz-widget-opacity;
    }

  > .nz-horizontal-toolbar-container {
    grid-area: htools;

    width: 100%;
    > .components-toolbar-overflow-sizer{
      display: flex;
      justify-content: flex-end;
    }
    @include nz-widget-opacity;
  }
}