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

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

.components-drawing-navigation-aid {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--iui-color-border-foreground),
    0 0 0 2px var(--iui-color-text);
  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: var(--iui-color-background);
      border: 1px solid var(--iui-color-background-disabled);
      cursor: pointer;
      border-radius: var(--iui-border-radius-1);
      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: var(--iui-color-background);
      border: 1px solid var(--iui-color-background-disabled);
      border-radius: var(--iui-border-radius-1);
      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: var(--iui-color-background);
      opacity: 0.5;
      color: var(--iui-color-text);
      border-radius: var(--iui-border-radius-1);
      bottom: 10px;
      left: 10px;
      height: 16px;
      width: 16px;
      font-size: 12px;
      line-height: 16px;
      text-align: center;

      &.checked {
        color: var(--iui-color-text-accent);
      }

      &:hover {
        opacity: 1;
      }
    }

    .zoom {
      position: absolute;
      border: 1px solid var(--iui-color-background-disabled);
      border-radius: var(--iui-border-radius-1);
      right: 10px;
      bottom: 10px;

      .zoom-button {
        cursor: pointer;
        background-color: var(--iui-color-background);
        height: 32px;
        width: 32px;
        line-height: 32px;
        text-align: center;

        &:first-child {
          border-bottom: 1px solid var(--iui-color-background-disabled);
        }

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