@mixin orientedImageryViewerNavigationUI() {
  .esri-oriented-imagery-viewer__navigation-ui {
    box-sizing: border-box;
    display: flex;
    position: absolute;
    inset-block-end: 0;
    inset-inline: 50%;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
    z-index: var(--calcite-z-index-overlay);
    width: 50%;
    max-width: 330px;
    overflow: hidden;
    pointer-events: none;
    translate: -50%;
    aspect-ratio: 1;

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

      position: absolute;
      transform-origin: top;
      transform-style: preserve-3d;
      transition: border-color 150ms ease;
      border: 3px solid #bfc5cc;
      border-radius: 50%;
      cursor: not-allowed;
      width: 4.5em;
      height: 4.5em;

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

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

          border-color: var(--calcite-color-brand);
        }
      }

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

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