/*---------------------------------------------------------------------------------------------
 * 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 var(--iui-duration-2) ease,
    opacity var(--iui-duration-2) 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;
  }
}