// Height of the fixed bottom nav (should match .o-menu min-height)
$bottom-nav-height: 56px;

// ============================================================================
// :: Content
// ============================================================================

// ============================================================================
// :: Root
// ============================================================================
.l-content {
  @include respond-to($breakpoint-tablet-default) {
    padding-bottom: calc(#{$bottom-nav-height} + env(safe-area-inset-bottom));
    padding-bottom: calc(
      #{$bottom-nav-height} + constant(safe-area-inset-bottom)
    );
  }

  /**
   * When multiple content blocks are placed next to eacher other they gain the
   * some spacing so they don't hang onto each other by applying margin-top
   */
  & + .l-content {
    margin-top: 2rem;

    @include respond-at($breakpoint-tablet-default) {
      margin-top: 3rem;
    }
  }
}

// ============================================================================
// :: Elements
// ============================================================================
/**
 * When multiple content__item blocks are placed next to eacher other they gain
 * the some spacing so they don't hang onto each other, but the last element in
 * the l-content container has no margin-bottom
 */
.l-content__item {
  margin-bottom: 2rem;

  @include respond-at($breakpoint-tablet-default) {
    margin-bottom: 3rem;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
/**
 * When a l-content--grey is used, we add spacing to the container in order for
 * the background-color not to stick to the content.
 * If another l-content--grey is used after that the margin-top and padding-top
 * is removed so both background-colors are placed next to each other without
 * spacing
 */
.l-content--grey {
  padding: 2rem 0;

  background-color: $background-color-base;

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

  + .l-content--grey {
    margin-top: 0;
    padding-top: 0;
  }
}

.l-content__item--center {
  width: 100%;

  text-align: center;
}

.l-content__item--spacing-large {
  margin-bottom: 3rem;

  @include respond-at($breakpoint-tablet-default) {
    margin-bottom: 6rem;
  }
}