/*---------------------------------------------------------------------------------------------
* 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/z-index";
@import "~@bentley/ui-core/lib/ui-core/style/themecolors";

#components-drawing-portal {
  @include uicore-z-index(dragged-widget);
}

.components-drawing-navigation-aid {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px $buic-inputs-border, 0 0 0 2px $buic-text-color;
  height: 96px;
  width: 96px;

  .drawing-canvas {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    min-width: 96px;
    min-height: 96px;
  }

  .drawing-container {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;

    .drawing-view-window {
      position: absolute;
      left: 0px;
      top: 0px;
      border: white 1px solid;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .unrotate-button {
      position: absolute;
      background-color: $buic-background-control;
      border: 1px solid $buic-background-toolbutton-stroke;
      cursor: pointer;
      border-radius: 3px;
      top: 10px;
      left: 0px;
      right: 0px;
      margin: auto;
      font-size: 13px;
      height: 20px;
      width: 64px;
      line-height: 20px;
      text-align: center;

      &:focus {
        outline: none;
      }
    }

    .close {
      position: absolute;
      cursor: pointer;
      background-color: $buic-background-control;
      border: 1px solid $buic-background-toolbutton-stroke;
      border-radius: 3px;
      right: 10px;
      top: 10px;

      .close-icon {
        height: 32px;
        width: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 18px;
        transform: rotate(45deg);
      }
    }

    .toggle-rotate-style {
      position: absolute;
      cursor: pointer;
      background-color: $buic-background-control;
      opacity: 0.5;
      color: $buic-foreground-body;

      &.checked {
        color: $buic-foreground-primary;
      }

      &:hover {
        opacity: 1;
      }

      border-radius: 3px;
      bottom: 10px;
      left: 10px;
      height: 16px;
      width: 16px;
      font-size: 12px;
      line-height: 16px;
      text-align: center;
    }

    .zoom {
      position: absolute;
      border: 1px solid $buic-background-toolbutton-stroke;
      border-radius: 3px;
      right: 10px;
      bottom: 10px;

      .zoom-button {
        cursor: pointer;
        background-color: $buic-background-control;
        height: 32px;
        width: 32px;
        line-height: 32px;
        text-align: center;

        &:first-child {
          border-bottom: 1px solid $buic-background-toolbutton-stroke;
        }

        &:focus {
          outline: none;
        }
      }
    }
  }
}