@import './base.scss';


.#{$prefix}-guide {
  &__reference {
    position: absolute;
    box-shadow: 0 0 0 0 $guide-reference-mask-color, $guide-reference-mask-color 0 0 0 5000px;
    border-radius: $guide-reference-border-radius;
    transition: all $anim-duration-base $anim-time-fn-ease-out;

    &--nonoverlay {
      box-shadow: none;
      border: $guide-reference-border;
    }
  }

  &__container {
    display: inline-block;

    &--popover {
      background-color: $guide-popover-bg-color;
      border: $guide-popover-border;
      border-radius: $guide-popover-border-radius;
      box-shadow: $guide-popover-shadow;
      padding: $guide-popover-padding;
      min-width: $guide-popover-min-width;
      max-width: $guide-popover-max-width;
      box-sizing: content-box;
    }

    &--dialog {
      background-color: $guide-popover-bg-color;
      border-radius: $guide-dialog-border-radius;
      padding: $guide-dialog-padding;
      width: $guide-dialog-width;
      box-sizing: content-box;
    }
  }
}

::v-deep .press-guide___overlay.press-overlay,
.press-guide___overlay.press-overlay {
  background-color: transparent;
  height: calc(100vh - var(--window-top, 0));
  top: var(--window-top, 0);
}