// --------------------------------------------------
// contentObject
// --------------------------------------------------

// "_htmlClasses"
// Hide nav back button
// --------------------------------------------------
.hide-nav-back-btn .nav__back-btn {
  .u-display-none;
}

// "_classes"
// Hide the page header
// --------------------------------------------------
.hide-page-header .page__header {
  .u-display-none;
}

// Header color mixin
// Add to menu/page to enable
// e.g. 'header-color transparent-dark'
// Note: both arguments must be predefined variables
// --------------------------------------------------
.header-color-mixin(background, background-inverted);
.header-color-mixin(transparent-light, font-color);
.header-color-mixin(transparent-dark, font-color-inverted);

.header-color-mixin(@color, @color-inverted) {

.header-color.@{color} {
  .menu,
  .page {
    &__header {
      background-color: @@color;
    }
  }
  .menu,
  .page {
    &__title,
    &__subtitle,
    &__body,
    &__body a,
    &__instruction,
    &__instruction a {
     color: @@color-inverted;
    }
  }
}

}

// --------------------------------------------------
// Block
// --------------------------------------------------

// Custom class added to block
// Aligns child components centrally on the vertical axis
// --------------------------------------------------
.block.align-vert-center .component__container {
  align-items: center;
}

// Aligns child components to the bottom of the parent block on the vertical axis
// --------------------------------------------------
.block.align-vert-bottom .component__container {
  align-items: flex-end;
}

// Reverses the visual layout of the components above the medium breakpoint
// e.g. Left layout components would still render first in the DOM order
// but visually appear on the right hand side above the medium breakpoint. The
// components woud vertically stack as per the DOM order below the breakpoint
// --------------------------------------------------
.block.reverse-desktop-order .component {
  @media (min-width: @device-width-medium) {
    &__container {
      flex-direction: row-reverse;
    }

    &.is-left {
      padding-right: inherit;
      padding-left: @component-padding-hoz;

      .dir-rtl & {
        padding-left: inherit;
        padding-right: @component-padding-hoz;
      }
    }

    &.is-right {
      padding-left: inherit;
      padding-right: @component-padding-hoz;

      .dir-rtl & {
        padding-right: inherit;
        padding-left: @component-padding-hoz;
      }
    }
  }
}

// Extend width of block to max page width
// --------------------------------------------------
.block.extend-container .block__inner {
  max-width: @max-width;
}

// Remove top padding from block
// --------------------------------------------------
.block.remove-padding-top .block__inner,
.block.remove-top-padding .block__inner {
  padding-top: 0;
}

// Remove bottom padding from block
// --------------------------------------------------
.block.remove-padding-bottom .block__inner,
.block.remove-bottom-padding .block__inner {
  padding-bottom: 0;
}

// Reduce the blocks top padding by half
// --------------------------------------------------
.block.reduce-padding-top .block__inner {
  padding-top: @block-padding-ver / 2;
}

// Reduce the blocks bottom padding by half
// --------------------------------------------------
.block.reduce-padding-bottom .block__inner {
  padding-bottom: @block-padding-ver / 2;
}

// Double the blocks top padding
// --------------------------------------------------
.block.increase-padding-top .block__inner {
  padding-top: @block-padding-ver * 2;
}

// Double the blocks bottom padding
// --------------------------------------------------
.block.increase-padding-bottom .block__inner {
  padding-bottom: @block-padding-ver * 2;
}

// Background color mixin
// Add to block to enable
// e.g. 'block-color black'
// Note: both arguments must be predefined variables
// --------------------------------------------------
.block-color-mixin(transparent-light, black);
.block-color-mixin(transparent-dark, white);
.block-color-mixin(black, white);
.block-color-mixin(background, background-inverted);

.block-color-mixin(@color, @color-inverted) {

.block-color.@{color} {
  background-color: @@color;
  color: @@color-inverted;

  .block,
  .component {
    &__title,
    &__body a,
    &__instruction a {
      color: @@color-inverted;
    }
  }

  .narrative {
    &__progress {
      background-color: fade(@@color-inverted, 50%);
    }

    &__progress.is-selected {
      background-color: @@color-inverted;
    }
  }
}

}
