@include component-rules($petals--layout-container-component-name) {
  box-sizing: border-box;
  height: 100%;
  background-color: var($__petals--layout-container-bg, $petals--layout-container-bg);

  &--vertical {
    &.has-header {
      padding-top: var($__petals--layout-header-height, $petals--layout-header-height);
    }

    &.has-footer {
      padding-bottom: var($__petals--layout-footer-height, $petals--layout-footer-height);
    }
  }

  &--horizontal {
    @include pie-clearfix;

    &.has-aside {
      padding-left: var($__petals--layout-aside-width, $petals--layout-aside-width);
    }
  }
}

@include component-rules($petals--layout-header-component-name) {
  box-sizing: border-box;
  height: var($__petals--layout-header-height, $petals--layout-header-height);
  margin-top: calc(var(#{$__petals--layout-header-height}, #{$petals--layout-header-height}) * -1);
  padding:
    var($__petals--layout-header-padding-y, $petals--layout-header-padding-y)
    var($__petals--layout-header-padding-x, $petals--layout-header-padding-x);
  font-size: var($__petals--layout-header-font-size, $petals--layout-header-font-size);
  color: var($__petals--layout-header-color, $petals--layout-header-color);
  background-color: var($__petals--layout-header-bg, $petals--layout-header-bg);
  box-shadow: var($__petals--layout-header-box-shadow, $petals--layout-header-box-shadow);
}

@include component-rules($petals--layout-footer-component-name) {
  box-sizing: border-box;
  height: var($__petals--layout-footer-height, $petals--layout-footer-height);
  margin-bottom: calc(var(#{$__petals--layout-footer-height}, #{$petals--layout-footer-height}) * -1);
  padding:
    var($__petals--layout-footer-padding-y, $petals--layout-footer-padding-y)
    var($__petals--layout-footer-padding-x, $petals--layout-footer-padding-x);
  font-size: var($__petals--layout-footer-font-size, $petals--layout-footer-font-size);
  color: var($__petals--layout-footer-color, $petals--layout-footer-color);
  background-color: var($__petals--layout-footer-bg, $petals--layout-footer-bg);
}

@include component-rules($petals--layout-main-component-name) {
  margin: var($__petals--layout-main-margin, $petals--layout-main-margin);
  padding: var($__petals--layout-main-padding, $petals--layout-main-padding);
}

@include component-rules($petals--layout-aside-component-name) {
  box-sizing: border-box;
  float: left;
  width: var($__petals--layout-aside-width, $petals--layout-aside-width);
  height: 100%;
  margin-left: calc(var(#{$__petals--layout-aside-width}, #{$petals--layout-aside-width}) * -1);
  border-right:
    var($__petals--layout-aside-border-width, $petals--layout-aside-border-width) solid
    var($__petals--layout-aside-border-color, $petals--layout-aside-border-color);
  font-size: var($__petals--layout-aside-font-size, $petals--layout-aside-font-size);
  font-weight: var($__petals--layout-aside-font-weight, $petals--layout-aside-font-weight);
  color: var($__petals--layout-aside-color, $petals--layout-aside-color);
  background-color: var($__petals--layout-aside-bg, $petals--layout-aside-bg);
}

.background {
  background-color: #fff;

  &--blue {
    color: rgb(255, 255, 255);
  }
}