// ============================================================================
// :: Block
// ============================================================================
/**
 * Define specific styling for a block component
 */

// ============================================================================
// :: Base
// ============================================================================

%__block-base {
  background-color: $background-color-white;
  border-radius: $border-radius-1x-large;

  @include respond-at($breakpoint-tablet-default) {
    padding: 2rem 2.5rem;
  }

  @include respond-at($breakpoint-desktop-default) {
    padding: 3.5rem;
  }
}

// ============================================================================
// :: Block - grey
// ============================================================================
%__block-grey {
  @extend %__block-base;

  background-color: $background-color-base;

  /**
   * When this block is used, its background changes to the same background
   * color as the show-more component. To negate that we darken the background-color
   * of the show-more component
   */
  .m-show-more {
    background-color: $background-color-light;
  }
}

// ============================================================================
// :: Block - grey - mobile
// ============================================================================
%__block-grey-mobile {
  @extend %__block-base;

  @include respond-to($breakpoint-tablet-default) {
    background-color: $background-color-base;
    border-radius: 0;
  }

  /**
   * When this block is used, its background changes to the same background
   * color as the show-more component. To negate that we darken the background-color
   * of the show-more component, but only on mobile devices
   */
  .m-show-more {

    @include respond-to($breakpoint-tablet-default) {
      background-color: $background-color-light;
    }
  }
}

// ============================================================================
// :: Block - grey
// ============================================================================
%__block-red-gradient {
  @extend %__block-base;

  border-radius: 0;
  background-color: $secondary-color-base;
}

// ============================================================================
// :: Block shadow
// ============================================================================
%__block-shadow-mobile {

  @include respond-to($breakpoint-tablet-default) {
    position: relative;
    z-index: $z-index-floor;

    box-shadow: $box-shadow-light;
  }
}