@import "../alignment";

// 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;

/// For some reason there has always been a default padding top for
/// logo in mobile layout.
$logo-background-image-variant-mobile-padding-top: 1% !default;

/// Display logo_banner.svg behind logo
$logo-background-image-variant-banner: false !default;

$logo-background-image-variant-banner-height: 100px !default;

$logo-background-image-variant-banner-mobile-height: null !default;

$logo-background-image-variant-banner-phone-height: null !default;

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

  %background_logo {
    top: $top;
    position: absolute;
    min-width: $min-width;
    max-width: $max-width;
    width: $width;
    height: $height;
    background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.#{$logo-image-file-extension}");
    background-repeat: no-repeat;
    background-size: contain;

    @include dir-ltr {
      background-position: #{$logo-alignment} top;
    }

    @include dir-rtl {
      background-position: #{if($logo-alignment == "left", "right", "left")} top;
    }

    @include mobile {
      background-position: left top;
      padding-top: $logo-background-image-variant-mobile-padding-top;
      height: $mobile-height;
    }

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

    @include logo-alignment;
  }

  #{$page-selector} {
    .content_and_background .scroller > div:after {
      @extend %background_logo;

      content: "";
      z-index: 200;
    }

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

    @if $logo-background-image-variant-banner {
      .content_and_background .scroller > div:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 200;
        width: 100%;
        height: $logo-background-image-variant-banner-height;
        padding-right: 100px;
        background-image: image-url("pageflow/themes/#{$theme-name}/logo_banner.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;

        @include mobile {
          height: $logo-background-image-variant-banner-mobile-height;
        }

        @include phone {
          height: $logo-background-image-variant-banner-phone-height;
        }

      }
    }
  }

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

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