/* Copyright 2026 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #scheme=relative
 * #css_wrapper_metadata_end */

:host {
  --cursor-img-url: url('glic_region_selection_cursor_icon.svg');
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  /* The overlay is fullscreen, but we only want the screenshot portion to be
  selectable */
  pointer-events: auto;
  width: 100%;
}

#selectionOverlay {
  cursor: crosshair;
  display: grid;
  pointer-events: auto;
  position: relative;

  /* Disable native dragging */
  user-select: none;
  -webkit-user-drag: none;
}

:host([is-initial-size]) #backgroundImageCanvas {
  animation:
    initial-blur-animation 700ms cubic-bezier(0.2, 0, 0, 1),
    initial-inset-animation 400ms cubic-bezier(0.05, 0.7, 0.1, 1),
    initial-scale-animation 400ms cubic-bezier(0.05, 0.7, 0.1, 1);
  position: relative;
}

:host([is-resized]) #backgroundImageCanvas {
  border-radius: 16px;
  outline: none;
}

:host([is-resized]) #selectionElements {
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

/* Force all child elements to share the same grid cell so they overlap. */
#selectionOverlay > * {
  grid-column: 1;
  grid-row: 1;
  /* Allow each full size element to not interfere with each other. */
  pointer-events: none;
}

:host([disable-shimmer]) #overlayShimmerCanvas {
  display: none;
}

:host([shimmer-on-segmentation])
  #overlayShimmerCanvas {
  z-index: 4; /* Position above words but below selection corners. */
}

#backgroundImageCanvas {
  outline: 6vmax outset rgba(0, 0, 0, 0.3);
  visibility: hidden;
}

:host([is-screenshot-rendered]) #backgroundImageCanvas {
  visibility: visible;
}

#selectionElements {
  background-color: rgba(var(--color-scrim-rgb), 0.05);
}

:host([hide-background-image-canvas]) #backgroundImageCanvas {
  visibility: hidden;
}

#selectionOverlay :not(#backgroundImageCanvas) {
  transition: opacity 150ms linear;
}

:host([is-closing]) #selectionOverlay :not(#backgroundImageCanvas) {
  opacity: 0;
}

:host([is-initial-size]) #initialFlashScrim {
  animation:
    initial-inset-animation 400ms cubic-bezier(0.05, 0.7, 0.1, 1),
    initial-scale-animation 400ms cubic-bezier(0.05, 0.7, 0.1, 1),
    initial-flash-animation 700ms cubic-bezier(0.2, 0, 0, 1);
  background-color: rgb(255, 255, 255);
  height: 100%;
  max-height: 100vh;
  max-width: 100vw;
  opacity: 0%;
  width: 100%;
}

#extraScrim {
  background-color: var(--color-scrim);
  /* Start at 0% opacity since #selectionElements already is darkened. */
  opacity: 0%;
  transition: opacity 0.8s ease-out;
  pointer-events: none;
}

:host([darken-extra-scrim]) #extraScrim {
  opacity: 10%;
}

#selectionElements > * {
  inset: 0;
  position: absolute;
}

#postSelectionRenderer {
  z-index: 3;
}

#regionSelectionLayer[is-selecting] {
  z-index: 2;
}

#cursor {
  align-items: center;
  display: flex;
  height: 32px;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
}

#cursorImg {
  background-color: var(--color-primary);
  height: 100%;
  mask-image: var(--cursor-img-url);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 20px;
  width: 100%;
}

#cursor.hidden {
  visibility: hidden;
}

:host([is-closing]) #cursor {
  /* Immediately hide the cursor so that it doesn't reappear if the
   * mouse hovers over the selection overlay as the side panel closes. */
  visibility: hidden;
}

/* Set styles for high contrast mode in Windows. */
@media (forced-colors: active) {
  #cursor {
    /* Set the icon color to hcm (high contrast mode) value. */
    background: ButtonFace;
    /* Add a border since the shadow is not visible in hcm. */
    border: 1px solid ButtonBorder;
  }

  #cursorImg {
    /* Set the icon color to hcm (high contrast mode) value. */
    background-color: ButtonText;
  }
}

@keyframes initial-inset-animation {
  50% {
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
    border-radius: 8px;
  }

  to {
    border-radius: 0;
  }
}

@keyframes initial-blur-animation {
  /* 2/7 of the way through the animation. */
  28.6% {
    filter: blur(2.5px);
  }

  to {
    filter: none;
  }
}

@keyframes initial-flash-animation {
  /* 2/7 of the way through the animation. */
  28.6% {
    opacity: 30%;
  }

  to {
    opacity: 0%;
  }
}

@keyframes initial-scale-animation {
  50% {
    scale: 98%;
  }

  to {
    scale: 100%;
  }
}

@keyframes scale-in {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes scale-out {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0.8);
  }
}