@import "../../variables";

$applayout-header-border: .4rem;

.csb-applayout {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cse-applayout-header {
  background: white;
  border-bottom: $applayout-header-border solid $nav-background-color;
  position: relative;
}

.cse-applayout-menuLock{
  color: $base-font-color-light;
  cursor: pointer;
  opacity: .8;

  &:hover{
    opacity: 1;
  }
}

.cse-applayout-logo {
  position: absolute;
  top: 5px;
  left: 10px;
  bottom: -$applayout-header-border;
  width: $layout-nav-width;
  //background-color: $base-red-color;
  //background: linear-gradient(60deg,
  //        $base-red-color 0,
  //        $base-red-color 8%,
  //        adjust_color($base-red-color,$hue:-4%) 8%,
  //        adjust_color($base-red-color,$hue:-4%) 30%,
  //        adjust_color($base-red-color,$hue:-10%) 30%,
  //        adjust_color($base-red-color,$hue:-10%) 40%,
  //        adjust_color($base-red-color,$hue:-13%) 40%,
  //        adjust_color($base-red-color,$hue:-13%) 85%,
  //        adjust_color($base-red-color,$hue:-16%) 85%,
  //        adjust_color($base-red-color,$hue:-16%));
  border-bottom: $applayout-header-border solid $nav-background-color;
  color: white;
  opacity: .85;

  &:hover{
    opacity: 1;
  }

  &:focus {
    //outline: 1px solid rgba(white, 0.8);
    //outline-offset: -3px;
  }
  > span {
    left: .5rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0px;
    text-transform: uppercase;
    line-height: 1.2rem;
    > span {
      font-size: 1rem;
      display: inline-block;
      border-right: 1px solid rgba(white, .5);
      padding-right: .4rem;
      font-weight: bold;
      letter-spacing: 1px;
    }
  }

  //.css-hide-menu & {
  //  > span{
  //    top: 32%;
  //  }
  //}
}

.cse-applayout-menuLock{
  cursor: pointer;
  padding-right: .4rem;
  color: $base-font-color-light;
  opacity: .8;

  &:hover{
    opacity: 1;
  }
}

.cse-applayout-headercontent {
  //height: 2.5rem;
  display: flex;
  margin-left: $layout-nav-width;
  flex-direction: row;
  padding: .2rem .2rem 0rem .2rem;
  align-items: center;
}

.cse-applayout-customheader {
  flex: 1;
}

.cse-applayout-content {
  flex: 1;
  overflow: hidden;
  position: relative;

  & > aside {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: $layout-nav-width;
    background: white;
    border-right: 1px solid $base-border-color;
    z-index: 10000;
    transition: transform .3s;
    overflow: hidden;

    .css-hide-menu & {
      transform:translate3d(-100%,0,0);
    }
  }

  & > main {
    height: 100%;
    overflow: auto;
    &:not(.cxm-stretched) {
      margin-left: $layout-nav-width;
      .css-hide-menu & {
        margin-left: 0;
      }
    }
  }
}

.cse-applayout-footer{
  height:25px;
  margin-top: .2rem;
  background: $base-back-color;
  border-top: 1px solid $base-border-color;
  font-size: 95%;
  .cxb-cxcredit{
    height:25px;
    width:25px;
    bottom:0;
  }
}

.cxe-appversion-info{
  color: $base-font-color-light;
  &:hover{
    color: $base-font-color;
  }
}

//.cse-applayout-contentheader {
//  padding: 1.5rem 2rem;
//  //background-color: #f9f9fb;
//  background-color: $base-back-color;
//  border-bottom: 1px solid darken($base-border-color,2);
//}