@mixin orientedImageryViewerNavigationUI() {
  .geoscene-oriented-imagery-viewer__navigation-ui {
    box-sizing: border-box;
    display: flex;
    position: absolute;
    inset-block-end: var(--calcite-spacing-md);
    inset-inline: var(--calcite-spacing-md);
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
    z-index: var(--calcite-z-index-overlay);
    overflow: hidden;
    pointer-events: none;

    &__direction {
      --geoscene-oriented-imagery-viewer__navigation-ui-direction-color: rgb(245 222 179);
      --calcite-icon-color: var(--geoscene-oriented-imagery-viewer__navigation-ui-direction-color);

      position: absolute;
      cursor: not-allowed;
      width: 160px;
      height: 160px;

      &:not([disabled]) {
        cursor: pointer;
        pointer-events: auto;

        &:hover {
          --calcite-icon-color: var(--calcite-color-brand);

          border-radius: 50%;
          background-color: rgba(var(--calcite-color-brand), var(--calcite-opacity-half));
        }
      }

      &-pad {
        box-sizing: border-box;
        transform: perspective(400px) rotateX(60deg) var(--rotate-transform);
        width: 330px;
        height: 330px;
        filter: drop-shadow(0 2px 1px rgb(0 0 0 / 50%));
      }

      &--top {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        transform-style: preserve-3d;
      }

      &--bottom {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        transform-style: preserve-3d;
      }

      &--left {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        transform-style: preserve-3d;
      }

      &--right {
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        transform-style: preserve-3d;
      }
    }
  }
}

@if $include_OrientedImageryViewerNavigationUI == true {
  @include orientedImageryViewerNavigationUI();
}