/// Color of the gradient
/// @group page-colors
$page-shadow-color: #000 !default;

/// Color of the gradient on inverted pages
/// @group page-colors
$page-shadow-inverted-color: #fff !default;

/// Name of image file in theme directory to display behind the shadow
$page-shadow-image: null !default;

/// Opactiy of shadow image
$page-shadow-image-opacity: null !default;

/// Background position of shadow image
$page-shadow-image-position: right bottom !default;

/// Background size of shadow image
$page-shadow-image-size: contain !default;

/// Background size of shadow image in mobile layout.
$page-shadow-mobile-image-size: null !default;

.page {
  @if $page-shadow-image {
    .shadow_wrapper::after {
      content: "";
      background-image: image-url("pageflow/themes/#{$theme-name}/#{$page-shadow-image}");
      background-size: $page-shadow-image-size;
      background-repeat: no-repeat;
      background-position: $page-shadow-image-position;
      opacity: $page-shadow-image-opacity;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      @include transition(opacity 0.2s linear);

      @include mobile {
        background-size: $page-shadow-mobile-image-size;
      }

      .hideText & {
        opacity: 0;
      }
    }

    .video_page.should_play .shadow_wrapper::after {
      opacity: 0;
    }
  }

  .shadow {
    @include shadow-start($page-shadow-color);
  }

  &.text_position_right .shadow {
    @include shadow-end($page-shadow-color);
  }

  // Not all page types support text position "center" so far. Make
  // sure styles only apply to those that explicitly opt in by setting
  // a class on their wrapper element.

  &.text_position_center .supports_text_position_center .shadow {
    background: transparentize($page-shadow-color, 0.3);
  }

  &.invert {
    .shadow {
      @include shadow-start($page-shadow-inverted-color);
    }

    &.text_position_right .shadow {
      @include shadow-end($page-shadow-inverted-color);
    }

    &.text_position_center .supports_text_position_center .shadow {
      background: transparentize($page-shadow-inverted-color, 0.3);
    }
  }
}
