@mixin hoverEl {
  position: absolute;
  height: calc(100% + 6px);
  width: calc(100% + 6px);
  border: 1px solid transparent;
  top: -3px;
  left: -3px;
  border-radius: 50%;
}

.preview-popup-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;

  &,
  img {
    border-radius: 50% !important;
  }

  .teaser--small__media & {
    width: 44px;
    height: 44px;
  }
}

.preview-popup-link--image {
  position: relative;
  display: block;
}

img.preview-popup-link--image,
.preview-popup-link--text img {
  border: 2px solid transparent;

  &:before {
    display: none;
  }

  &:hover {
    box-shadow: 0 0 0 1px var(--primary-color);
  }
}

.preview-popup-link,
.preview-popup-link--image {
  &:before {
    content: '';
    @include hoverEl;
  }

  &:hover {
    &:before {
      border-color: var(--primary-color);
    }
  }
}

.preview-popup-link--text {
  &:hover {
    text-decoration: underline;
  }
}
