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

$nz-widget-target-border-color: $buic-background-5;
$nz-widget-target-background: $buic-background-4;
$nz-widget-target-border-size: 2px;

@mixin nz-widget-target {
  $length: 4em;

  height: $length;
  width: $length;
  border: $nz-widget-target-border-size solid $nz-widget-target-border-color;
  border-radius: var(--iui-border-radius-1);
  box-sizing: border-box;
  background-color: $nz-widget-target-background;
  transition: transform var(--iui-duration-1) ease-in;
  pointer-events: all;
  display: flex;
  box-shadow: var(--iui-shadow-3);

  @include uicore-z-index(drop-target);

  @media (prefers-reduced-motion: no-preference) {
    @keyframes nz-pulse {
      from {
        transform: scale3d(1, 1, 1);
      }

      50% {
        transform: scale3d(1.1, 1.1, 1.1);
      }

      to {
        transform: scale3d(1, 1, 1);
      }
    }

    @keyframes nz-grow {
      from {
        transform: scale3d(0, 0, 0);
      }

      to {
        transform: scale3d(1, 1, 1);
      }
    }
  }

  animation: nz-grow var(--iui-duration-1) ease-in-out,
    nz-pulse 3s ease-in-out 2s infinite;
}

@mixin nz-targeted-widget-target {
  transform: scale(1.2);
  background-color: $nz-opaque-outline-color;
  box-shadow: var(--iui-shadow-4);
  animation-iteration-count: 0, 0;
}