@use '00-variables' as variables;

/*------------------------------------*\
    #ANNOTATIONS
\*------------------------------------*/

/**
 * Annotated elements styles
 * 1) Annotation styles that appear inside the iframe
 * 2) For elements in the DOM that have an annotation, we want to
 * provide styles that help the user understand that annotations are available.
 * We do this with some cursor helpers and a
 */
.pl-has-annotation {
  cursor: help !important;
  outline: 1px dotted variables.$pl-color-gray-50;
  outline-offset: -4px;
  transition: box-shadow variables.$pl-animate-quick ease;

  a,
  input {
    cursor: help !important;
  }

  &:hover {
    box-shadow: 0 0 3px variables.$pl-color-gray-50;
  }

  &.active {
    box-shadow: inset 0 0 6px variables.$pl-color-gray-70;
    outline: 1px dotted variables.$pl-color-gray-50;
    outline-offset: -1px;
  }
}

/**
 * Annotation tooltip
 * 1) Appears inside the iframe over any element that has an
 *    annotation attached to it.
 */
.pl-c-annotation-tip {
  &:not([hidden]) {
    display: flex;
  }
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  margin-top: 6px !important;
  margin-left: 6px !important;
  border-radius: 50% !important;
  background-color: variables.$pl-color-gray-87 !important;
  background-color: var(--themePrimary) !important;
  color: variables.$pl-color-white !important;
  font-size: 16px !important;
  position: absolute;
  z-index: 100;
}