.uex-template {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  background-color: $uex-template-background-color;

  .uex-template-bg {
    width: 100%;
    height: 297px;
    position: fixed;
    top: 0;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
  }

  .uex-template-wrapper {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;

    .uex-template-header {
      display: block;
      width: 100%;
      padding: 0 .5rem .5rem;

      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

      $breadcrumb-padding: 1.5rem;
      $breadcrumb-height: 2.4rem+$breadcrumb-padding;

      .uex-template-breadcrumb {
        padding: ($breadcrumb-padding/2) + .1rem $breadcrumb-padding ($breadcrumb-padding/2) + 1rem;
        min-height: $breadcrumb-height;
        max-height: $breadcrumb-height;
        overflow: hidden;
      }

      .uex-template-title {
        h1 {
          margin: 0;
          padding: .4rem 1rem;
          font-size: 2.8rem;
          line-height: 1.2;
        }
      }

      .uex-template-subtitle {
        h2 {
          margin: 0;
          padding: 0 1rem;
          font-size: 1.7rem;
          line-height: 1.1;
        }
      }

      .uex-template-header-side {
        padding: .5rem 1.5rem;

        .uex-template-action-bar {
          padding: .5rem 0;

          &:first-child {
            padding-top: 0;
          }
        }
      }

      &:not(.uex-template-header-with-breadcrumbs) {
        padding-top: 1rem;
      }

      &.uex-template-header-theme-default {
        @include build-template-theme($uex-color, $uex-info-color, #FFFFFF, lighten($uex-info-color, .15));
      }

      &.uex-template-header-theme-dark {
        @include build-template-theme($uex-color, $uex-color, #FFFFFF, darken(#FFFFFF, .15));
      }

      &.uex-template-header-theme-light {
        @include build-template-theme(#FFFFFF, #FFFFFF, $uex-info-color, $uex-disabled-color);
      }

      &.uex-template-header-theme-blue {
        @include build-template-theme($uex-info-color, $uex-info-color, #FFFFFF, lighten($uex-info-color, .15));
      }

    }

    .uex-template-content {
      padding: .5rem;
    }
  }
}

@import "template/action-bar";
@import "template/breadcrumb";
@import "template/form-bar";