.layout-container {
  &--window-size {
    min-height: 100vh;
  }
  &--full-height {
    height: 100%;
  }
  &--decorated {
    @include breakpoint(medium) {
      margin: 30px;
    }
  }
  &--alert {
    color: $alert-color;
    background-color: $alert-light-color;
  }
  &--warning {
    color: $warning-color;
    background-color: $warning-light-color;
  }
  &--success {
    color: $success-color;
    background-color: $success-light-color;
  }
  &--alert-light {
    opacity: 0.7;
    background-color: $alert-color;
  }
  &--warning-light {
    opacity: 0.7;
    background-color: $warning-color;
  }
  &--success-light {
    opacity: 0.7;
    background-color: $success-color;
  }
  &--decorated {
    &--decorated {
      @include breakpoint(medium) {
        margin: 30px;
      }
    }
    &--alert {
      color: $alert-color;
      background-color: $alert-light-color;
    }
    &--warning {
      color: $warning-color;
      background-color: $warning-light-color;
    }
    &--success {
      color: $success-color;
      background-color: $success-light-color;
    }
    &--alert-light {
      opacity: 0.7;
      background-color: $alert-color;
    }
    &--warning-light {
      opacity: 0.7;
      background-color: $warning-color;
    }
    &--success-light {
      opacity: 0.7;
      background-color: $success-color;
    }
    &--decorated {
      .layout-item {
        @include breakpoint(medium) {
          padding: 5px;
        }
      }
    }
  }
}

.layout-item {
  max-height: 100%;
  .small-auto {
    @include breakpoint(small only) {
      width: auto;
    }
  }
  &--alert {
    @extend .layout-container--alert;
  }
  &--warning {
    @extend .layout-container--warning;
  }
  &--success {
    @extend .layout-container--success;
  }
  &--decorated {
    border: 1px solid #e0e0e0;
    padding: 40px;
  }
  &--input-horizontal {
    width: auto;
    padding-right: .8rem;
    flex: inherit;
    display: flex;
    align-items: center;
  }
}

.container {
  @extend .grid-container;
  max-width: 1085px;
  &--fluid {
    @extend .fluid;
  }
  &--wider {
    max-width: calc(1070px + #{map-get($grid-padding-gutters, small)});
    @include breakpoint(medium) {
      padding-top: rem-calc(60);
      max-width: calc(1070px + #{map-get($grid-padding-gutters, medium)});
    }
  }
  &--wider-no-padding {
    max-width: calc(1070px + #{map-get($grid-padding-gutters, small)});
    @include breakpoint(medium) {
      max-width: calc(1070px + #{map-get($grid-padding-gutters, medium)});
    }
  }
  &--page-top-layout-title {
    min-height: calc(100% - #{$page-top-layout-size});
  }
}

.inline-block {
  display: inline-block;
}

.horizontal-scroll-list {
  max-width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}

.page-container {
  margin-top: $site-navbar-responsive-height;
  @include breakpoint (medium) {
    margin-top: $site-navbar-height;
  }
  &--no-header {
    min-height: 100vh;
  }
  &--header {
    min-height: calc(100vh - #{$site-navbar-height-with-border});
  }
  &--semi-white {
    background-color: $semi-white;
  }
  position: relative;
}

.panel-container {
  background-color: $white;
  box-shadow: 0 1px 2px 0 rgba(42, 65, 86, 0.34);
  @include breakpoint(small only) {
    display: block;
    max-width: 100vw;
    padding: 10px;
    width: 100vw;
  }
  @include breakpoint(medium) {
    padding: rem-calc(40);
  }
}

.page-top-layout {
  @include breakpoint(small only) {
    background-color: #004171;
    min-height: rem-calc(40);
    z-index: 1;
  }
  @include breakpoint(medium) {
    min-height: $page-top-layout-size;
    background-color: #f6f6f7;
  }
}

.page-content {
  &--white {
    background-color: $white;
  }
  &--full-page {
    min-height: calc(100vh - #{$site-navbar-height});
  }
  &--with-page-top-layout {
    min-height: calc(100vh - #{$page-top-layout-size} - #{$site-navbar-height});
  }
}

.margin-container {
  margin: rem-calc(40 0);
  >.text-input--normal {
    @include first-child {
      padding-top: 0;
    }
  }
}