.hotgraphic-popup {
  // --------------------------------------------------
  // Increase toolbar padding top so the browser outline of the
  // item title is not hidden by toolbar
  // --------------------------------------------------
  &__inner.has-toolbar {
    padding-top: (@icon-size + (@icon-padding * 2)) + (@item-padding / 2);
  }
  // --------------------------------------------------

  &__controls,
  &__close {
    margin: @btn-margin / 2;
    padding: @btn-padding / 2;
    background-color: #fff;
    color: #000;
    border-radius: 50%;

    .no-touch &:hover {
      background-color: #fff;
      color: #000;
      .transition(background-color @duration ease-in, color @duration ease-in;);
    }
  }

  &__item-title {
    margin-bottom: @notify-title-margin;
    .notify-title;
    font-weight: 600;
    padding-right: 44px; 
  }

  &__item-body {
    margin-bottom: @notify-body-margin;

    @media screen and (max-width: 896px) {
      font-size: 1rem;
    }
  }

  &__item-body a {
    .link-text;
    color: @notify-link;

    .no-touch &:hover {
      color: @notify-link-hover;
      .transition(color @duration ease-in);
    }
  }

  &__item-image-container {
    .img-zoom();
  }
}
