/* @group Transition */

.highlight-transition-enter,
.highlight-transition-appear {
  &.highlight-overlay {
    opacity: 0.01;
  }
}

.highlight-transition-enter-active,
.highlight-transition-appear-active {
  &.highlight-overlay {
    opacity: 0.99;
    transition: opacity 0.3s ease-in;
  }
}

.highlight-transition-enter-done,
.highlight-transition-appear-done {
  &.highlight-overlay {
    opacity: 1;
  }
}

.highlight-transition-exit {
  &.highlight-overlay {
    opacity: 0.99;
  }
}

.highlight-transition-exit-active {
  &.highlight-overlay {
    opacity: 0.01;
    transition: opacity 0.2s ease-in;
  }
}

.highlight-transition-exit-done {
  &.highlight-overlay {
    opacity: 0;
  }
}

/* @end Transition */

.highlight {
  .highlight-overlay,
  .highlight-overlay-disabled {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .highlight-overlay {
    position: fixed;
    background-color: @highlight-overlay-background;
    z-index: @highlight-z-index;
  }

  .highlight-content {
    border-radius: @highlight-border-radius;

    &.open {
      position: relative;
      z-index: @highlight-z-index + 1;
    }
  }

  .highlight-overlay-disabled {
    position: absolute;
    z-index: @highlight-z-index + 2;
  }
}