// Lightning Design System 2.8.0
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @variant
 * @name base
 * @selector .slds-brand-band
 * @restrict div
 * @support dev-ready
 */

// If the brand band is standalone, use this modifier. If the brand band is being extended
// into another component use slds-brand-band without this modifier
.slds-brand-band {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  width: 100%;

  &:before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image:
      url($brand-band-default-image),
      linear-gradient(to top, $brand-background-dark-transparent 0, $brand-background-dark);
    background-repeat: repeat-x;
    background-position: top left;
  }

  &:after {
    content: none;
    display: block;
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: $brand-band-scrim-height;
    background-image: linear-gradient(to bottom, $brand-background-primary-transparent 60%, $brand-background-primary);
  }

  /**
   * @name cover
   * @summary Changes background image to be set to cover rather than contain
   * @selector .slds-brand-band_cover
   * @restrict .slds-brand-band
   * @modifier
   * @group position
   */
  &.slds-brand-band_cover:before {
    background-repeat: no-repeat;
    background-size: cover;
  }

  /**
   * @name small
   * @summary Sets height of brand band to
   * @selector .slds-brand-band_small
   * @restrict .slds-brand-band
   * @modifier
   * @group sizing
   */
  &.slds-brand-band_small {

    &:before {
      height: $brand-band-image-height-small;
    }

    &:after {
      content: '';
      top: ($brand-band-image-height-small - $brand-band-scrim-height);
    }
  }

  /**
   * @name medium
   * @summary Sets height of brand band to
   * @selector .slds-brand-band_medium
   * @restrict .slds-brand-band
   * @modifier
   * @group sizing
   */
  &.slds-brand-band_medium {

    &:before {
      height: $brand-band-image-height-medium;
    }

    &:after {
      content: '';
      top: ($brand-band-image-height-medium - $brand-band-scrim-height);
    }
  }

  /**
   * @name large
   * @summary Sets height of brand band to
   * @selector .slds-brand-band_large
   * @restrict .slds-brand-band
   * @modifier
   * @group sizing
   */
  &.slds-brand-band_large {

    &:before {
      height: $brand-band-image-height-large;
    }

    &:after {
      content: '';
      top: ($brand-band-image-height-large - $brand-band-scrim-height);
    }
  }

  // Full Height Modifier
  &.slds-brand-band_full {

    &:before {
      height: 100%;
    }
  }

  &.slds-brand-band_bottom:before {
    background-position: bottom;
    top: initial;
  }

  /**
   * @name no background
   * @summary Removes image but keeps page background
   * @selector .slds-brand-band_none
   * @restrict .slds-brand-band
   * @modifier
   * @group visibility
   */
  &.slds-brand-band_none:before {
    height: 0;
  }

  /**
   * @name Group background
   * @summary Uses the group banner image as the page background image
   * @selector .slds-brand-band_group
   * @restrict .slds-brand-band
   * @modifier
   * @group image
   */
  &.slds-brand-band_group:before {
    background-image: url($banner-group-default-image);
  }

  /**
   * @name User profile background
   * @summary Uses the user profile banner image as the page background image
   * @selector .slds-brand-band_user
   * @restrict .slds-brand-band
   * @modifier
   * @group image
   */
  &.slds-brand-band_user:before {
    background-image: url($banner-user-default-image);
  }

  // White page for iframes
  .slds-brand-band_blank {
    background: $color-background-alt;

    &:before,
    &:after {
      background: none;
    }
  }
}

// This resets the boundaries from templates that have absolute positioning
.slds-template__container {
  position: relative;
  height: 100%;
  width: 100%;
}

.slds-template_default {
  padding: $template-gutters;

  &.slds-brand-band:before {
    position: fixed;
    top: 5.625rem; // Height of global nav + header
  }

  &.slds-brand-band.slds-brand-band_medium:after {
    position: fixed;
    top: 15rem;
  }
}

.slds-template_bottom-magnet {
  padding: $template-gutters $template-gutters 0 $template-gutters;
}

.slds-template_profile {
  padding: $template-profile-gutters;
}

// This template is typically used on a content area where there's a left sticky nav especially when it will scroll and needs no right or bottom gutter
.slds-template__content {
  padding: $template-gutters $template-gutters 0 $template-gutters;
}

// This template is used on an iframe with an app inside that will scroll and needs no right or bottom gutter
.slds-template_app {
  padding: $template-gutters 0 0 $template-gutters;
}

// This template is used on the oneAloha wrapper surrounding an iframed page and has now been extended so that it effectively neutralizes the space created by brand band
.slds-template_iframe {
  width: calc(100% + (#{$template-gutters} * 2));
  height: calc(100% + (#{$template-gutters} * 2));
  margin: ($template-gutters * -1);
  background-color: $card-color-background;
}