.x-window {
  box-shadow: $boxShadowBig;
  border-radius: $borderRadius;
  opacity: 0;
  filter: alpha(opacity=0); /* for IE <= 8 */
  overflow: visible; /* prevent box-shadow from tabs and panel being cut off */
  -webkit-backface-visibility: hidden; /* prevent flickering during animation */
  transition: opacity .25s ease-in-out, transform .25s ease-in-out;
  transform: scale(1) translate3d(0, 0, 0);

  /* the following 3 classes are responsible for the CSS3 window animations */
  &.anim-ready {
    transform: scale(0.7) translate3d(0, 0, 0);
  }

  &.zoom-in {
    opacity: 1;
    filter: alpha(opacity=100); /* for IE <= 8 */
    transform: scale(1) translate3d(0, 0, 0);
  }

  &.zoom-out {
    transform: scale(1.3) translate3d(0, 0, 0);
    opacity: 0;
    filter: alpha(opacity=0); /* for IE <= 8 */
  }

  /* Make sure MODx.msg windows are displayed in IE8 */
  .ext-ie8 & {
    &.x-window-dlg {
      filter: alpha(opacity=100); /* for IE <= 8 */
    }
  }

  /* the window header bar */
  .x-window-tl,
  .x-window-tr {
    padding: 0;
  }

  .x-window-tc {
    z-index: 1;

    .x-window-header {
      background-color: $winHeaderBg;
      border-bottom: 1px solid $winHeaderBorderColor;
      border-radius: $borderRadius $borderRadius 0 0;
      color: $darkGray;
      font: $fontNavbar;
      font-weight: bold;
      padding: 8px;
      text-align: center;
    }

    .x-window-header-text {
        padding-left: 24px;
    }
  }

  /* styles for a collapsed window */
  &.x-panel-collapsed {

    .x-window-tl {
      border-bottom: 1px solid $softGray;
    }

    .x-window-header {
      border-radius: $borderRadius;
    }
  }

  /* the window content wrapper */
  .x-window-bwrap {
    overflow: visible; /* prevent box-shadow from tabs and panel being cut off */

    /* the window main container */
    .x-window-ml,
    .x-window-mr {
      padding: 0;
    }

    .x-window-mc {
      border: 0;
      padding: 0;

      .x-panel-ml,
      .x-panel-mr,
      .x-panel-mc,
      .x-panel-tl,
      .x-panel-bl {
        background: transparent;
        border: 0;
        padding: 0;
      }
    }
  }

  .x-window-body {
    background-color: $winBodyBg !important; /* override extjs default theme transparent !important style from .x-window-plain */
    border: 0; /* override extjs default theme border for .x-window-plain */
    overflow-y: auto;
    padding: 15px;
  }

  &.modx-window {
    .x-window-body {
      padding-top: 0;
    }

    &.modx-console,
    &.modx-alert,
    &.modx-confirm,
    & .x-window-with-tabs {
      .x-window-body {
        padding-top: 15px;
      }
    }

    .x-window-tc {
        .x-window-header-text {
            padding-left: 64px;
        }
    }
  }

  .x-panel-bwrap {
    background: $winBodyBg;
    padding: 0;

    /* inner panel body wraps */
    .x-panel-bwrap {
      background: transparent;
      box-shadow: none;
      overflow: visible;
      padding: 0;
    }
  }

  /* .x-panel-bwrap */

  .x-window-with-tabs {

    .x-window-body {
      background-color: $lightestGray !important; /* override !important rule from above */
      overflow: visible; /* prevent box-shadow from tabs and panel being cut off */
    }

    .x-panel-bwrap {
      background: transparent;
      box-shadow: none;
      overflow: visible;
      padding: 0;
    }
  }

  form.x-panel-body:first-of-type {
    overflow: visible !important; /* prevent box-shadow from tabs and panel being cut off */
  }

  /* the window tab strip if available */
  .modx-tabs {

    .x-tab-panel-header {
      .x-tab-strip-wrap {
        padding-top: 3px; /* account for the 3px boxshadow for active tabs */

        .x-tab-strip {
          border: 0; /* override extjs default theme of 1px solid white */
        }
      }
    }
  }

  /* the window form / content container */
  .x-tab-panel-bwrap {
    background: $white;
    box-shadow: $boxShadow;
    padding: 10px;

    .x-tab-panel-body {
      overflow-y: auto; /* tabs stay, content scrolls, but only show when necessary */

      .modx-panel {

        .x-panel-bwrap {
          padding: 0;
        }
      }
    }
  }

  /* The window bottom container */
  .x-window-bl,
  .x-window-br {
    padding: 0;
  }

  .x-window-bc {

    .x-window-footer {
      background-color: $winFooterBg;
      border-top: 1px solid $winFooterBorderColor;
      border-radius: 0 0 $borderRadius $borderRadius;
      box-sizing: border-box; /* don't count padding in width: 100%; */
      padding: 5px 15px 15px ; /* make sure the padding also stays when maximized */
      width: 100% !important; /* override fixed width set by extjs */
    }
  }

  &.x-window-maximized {
    margin: 0;

    .x-window-tc {
      padding: 0;
    }

    .x-window-mc {
      padding: 0;
    }
  }

  /* the console window */
  &.modx-console {

    .modx-console-text {
      background-color: $white;
      border: none;
      font: 12px $codefonts;
      height: auto !important; /* override extjs default theme */
    }

    .debug {
      color: $darkGray;
    }

    .success {
      color: $green;
    }

    .warn {
      color: $blue;
    }

    .error {
      color: $red;
    }
  }

  /* message dialog windows */
  &.x-window-plain {
      .x-toolbar-left-row {
          .x-toolbar-cell {
              /*
                  Note that because the MessageBox class in Extjs 3 is a singleton,
                  it can not be extended or overriden and is very limited in its
                  configuration options. Thus the fragile method here of selecting
                  the button by dom position. Ext always outputs all 4 buttons into
                  the markup and just hides ones not in use for a particular window type.
                  For the time-being, the primary button will always be the
                  first ("ok") or second ("yes", typically our save button) index.
              */
              &:nth-child(1),
              &:nth-child(2) {
                  .x-btn {
                      @extend %primary-button;
                  }
              }
          }
      }
  }
}

/* .x-window */

/* the progress bar (ex. saving a resource), usually in a window too */
.x-progress-wrap {
  width: 100% !important;
  border: 1px solid $green;

  .x-progress-inner {
    background-color: $lightGreen;
  }

  .x-progress-bar {
    background-color: $green;
    border: 0;
  }

  .x-progress-text {
    color: $colorSplashContrast;
    font-size: 11px;
    font-weight: bold;
  }

  .x-progress-text-back {
    color: $darkGray;
  }
}

/* the window modal mask, but also the mask that covers a grid when reloading for example */
.ext-el-mask {
  background-color: $white;
  opacity: 0;
  filter: alpha(opacity=0); /* for IE <= 8 */
  transition: opacity .25s;
  /*z-index: 10;*/ /* this is handeled by extjs and set to 9000 on show */

  &.fade-in {
    opacity: .5;
    filter: alpha(opacity=50); /* for IE <= 8 */
  }

  .x-masked & {
    opacity: .5;
    filter: alpha(opacity=50); /* for IE <= 8 */
    z-index: 9; /* extjs standard is 100, 10 prevents overlapping the topnav dropdowns */
  }
}

.ext-mb-icon {
  display: inline-block;
  float: left;
  position: relative;
  width: 40px !important; /* override extjs default theme style */

  &:before {
    @extend %pseudo-font;

    color: $blue;
    content: '';
    font-size: 32px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* center vertically with top 50% */
    right: 0;
    text-align: left;
    width: 100%;
  }

  &.ext-mb-info {
    &:before {
      color: $blue;
      content: fa-content($fa-var-info-circle);
    }
  }

  &.ext-mb-question {
    &:before {
      color: $blue;
      content: fa-content($fa-var-question-circle);
    }
  }

  &.ext-mb-warning {
    &:before {
      color: $orange;
      content: fa-content($fa-var-exclamation-triangle);
    }
  }

  &.ext-mb-error {
    &:before {
      color: $red;
      content: fa-content($fa-var-times-circle);
    }
  }
}

.ext-mb-content {
  display: block;
  margin-left: 0 !important;
}

/* this is the little box showing if a grid is locked, refreshing etc. */
.ext-el-mask-msg {
  background-color: $white;
  border: 1px solid $softGray;
  box-shadow: $boxShadow;
  border-radius: $borderRadius;
  padding: 5px;
  z-index: 10; /* the mask has 9, prevents overlapping the topnav dropdowns */
}

.ext-el-mask-msg div {
  background-color: transparent;
  border: 0;
  color: $darkGray;
  cursor: default; /* no need to show a wait cursor here */
  font: $fontSmall;
}

.ext-el-mask-msg .modx-lockmask div {
  color: $red;
}

/* the loading indicator when refreshing a grid or component */
.x-mask-loading div {
  background-image: url($imgPath + 'modx-theme/grid/loading.gif');
}
