@mixin logo-variant-background-image(
  $first-page-only,
  $top,
  $min-width,
  $max-width,
  $width,
  $height,
  $mobile-height,
  $phone-top
) {
  $page-selector: if($first-page-only, ":first-child", "");

  .js .page#{$page-selector} {
    .content_and_background .scroller > div:after {
      content: "";
      position: absolute;
      left: 8%;
      top: $top;
      z-index: 200;
      min-width: $min-width;
      max-width: $max-width;
      width: $width;
      height: $height;
      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: left top;

      @include mobile {
        padding-top: 1%;
        height: $mobile-height;
      }

      @include phone {
        top: $phone-top;
      }
    }

    &.invert .content_and_background .scroller > div:after {
      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header_invert.png");
    }
  }
}

// Opacity of the logo
$logo-background-image-variant-opacity: null !default;

/// Opacity of the logo on the first page
$logo-background-image-variant-first-page-opacity: null !default;

@mixin logo-variant-background-image(
  $first-page-only,
  $top,
  $min-width,
  $max-width,
  $width,
  $height,
  $mobile-height,
  $phone-top
) {
  $page-selector: if($first-page-only, ":first-child", "");

  .js .page#{$page-selector} {
    .content_and_background .scroller > div:after {
      content: "";
      position: absolute;
      left: 8%;
      top: $top;
      z-index: 200;
      min-width: $min-width;
      max-width: $max-width;
      width: $width;
      height: $height;
      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: left top;

      @include mobile {
        padding-top: 1%;
        height: $mobile-height;
      }

      @include phone {
        top: $phone-top;
      }
    }

    &.invert .content_and_background .scroller > div:after {
      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header_invert.png");
    }
  }

  .page .scroller > div:after {
    opacity: $logo-background-image-variant-opacity;
  }

  .page:first-child .scroller > div:after {
    opacity: $logo-background-image-variant-first-page-opacity;
  }
}

Allow specifying opacity of image variant logo
Allow specifying opacity of image variant logo

Provide a separate variable for the logo on the first page, to allow
e.g. having a transparent logo on all but the first page.
