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

  &__controls,
  &__close {
    margin: @btn-margin / 2;
    padding: @btn-padding / 2;
    background-color: @notify-icon;
    color: @notify-icon-inverted;
    border: 1px solid @notify-icon-inverted;
    border-radius: @btn-border-radius;

    .no-touch &:not(.is-disabled):not(.is-locked):hover {
      background-color: @notify-icon-hover;
      color: @notify-icon-inverted-hover;
      .transition(background-color @duration ease-in, color @duration ease-in;);
    }
  }

  &__item-title {
    margin-bottom: @notify-title-margin;
    .notify-title;
  }

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

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

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

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