@import "../alignment";

/// Fade in logo when scroller is near top
///
/// - `"first-page"`: only on first page
///
/// - `"all-pages"`: on all pages
$logo-watermark-variant-fade-in-near-top: "first-page" !default;

/// Fade in logo when header is active. If the header logo is
/// inverted on the current page, the non-inverted logo variant
/// is displayed while the header is active.
$logo-watermark-variant-fade-in-with-header: false !default;

/// Set opacity value of watermark logos
$logo-watermark-variant-opacity: 0.3 !default;

@mixin logo-variant-watermark(
  $top,
  $width,
  $height,
  $phone-height
) {
  .header_logo {
    @extend %pageflow_widget_margin_top !optional;
    display: none;

    @include hide-text;
    position: absolute;
    width: $width;
    height: $height;
    top: $top;
    z-index: 1;

    pointer-events: none;
    opacity: $logo-watermark-variant-opacity;
    @include transition(opacity 500ms);

    @include phone {
      width: $phone-height * $width / $height;
      height: $phone-height;
      top: 21px;
    }

    @include logo-alignment;

    .js & {
      display: block;
    }

    &:after,
    &:before {
      background-repeat: no-repeat;
      background-size: 100% auto;
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      pointer-events: none;
      @include transition(opacity 500ms);
    }

    &:before {
      opacity: 1;
      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.#{$logo-image-file-extension}");
    }

    &:after {
      opacity: 0;
      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header_invert.#{$logo-image-file-extension}");
    }
  }

  .header.invert .header_logo:before {
    opacity: 0;
  }

  .header.invert .header_logo:after {
    opacity: 1;
  }

  .header.near_top .header_logo {
    pointer-events: all;
  }

  @if $logo-watermark-variant-fade-in-near-top == "first-page" {
    .header.near_top.first_page .header_logo {
      opacity: 1;
    }
  } @else {
    .header.near_top .header_logo {
      opacity: 1;
    }
  }

  @if $logo-watermark-variant-fade-in-with-header {
    .header {
      &.active .header_logo {
        opacity: 1;
      }

      &.invert.active .header_logo:before {
        opacity: 1;
      }

      &.invert.active .header_logo:after {
        opacity: 0;
      }
    }
  }

  .header.near_top .header_logo:hover {
    opacity: 1;
  }
}