%reset-box-heading{
  padding-right: 2*$box-padding;;
  padding-left: 0;
  background: transparent;
  //@extend %h4;
  &:after{
    background: none !important;
  }
}
%reset-box{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  overflow: visible;
  @extend %border-radius-none;
  @include box-shadow(none);
  .module-toggle-button {
	margin: 0;
    .expander{
      right: 0;
    }
	& + div{
	  background: none;
	  border: none;
	  padding-left: 0;
      padding-right: 0;
	  margin: 0;
	}
  }
  .module-heading{
    @extend %reset-box-heading;
  }
}
%box-last-bottom-negativ-margin{
  .module-toggle-button + div > &:last-child{
    margin-bottom: -$box-padding;
    .box &, .easy-content-page &{
      margin-bottom: 0;
    }
  }
}
%box-border{
  @extend %border-radius-large;
  @extend %material__elevation--depth_2;
}
%box-appearance{
  @extend %box-border;
  background: $color-foreground;
}
%box-padding{
  padding: $box-padding;
}
%box-inset{
  padding: $gap;
  border: 1px solid $color-border;
  background: lighten($color-background,0%);
}
%box-inside{
  background: $color-foreground;
}
%module-control{
  position: absolute;
  top: 0;
  right: 0;
  @extend %control-close;
}
%box-control{
  top: .75*$box-padding;
  right: .75*$box-padding;
  @include respond-to(max-small-screen){
    top: .5*$box-padding + 2;
    right: $box-padding + 2;
  }
  @extend %module-control;
}
%module-toggle{
  position: relative;
  cursor: pointer;
  .expander{
    @extend %module-control;
  }
}
%box-toggle{
  margin: .25*$gap - $box-padding;
  position: relative;
  cursor: pointer;
  .expander{
    @extend %box-control;
  }
}
%box-heading{
  //font-weight: bold;
  background: mix($color-foreground,$color-background);
  padding: .875*$box-padding;;
  margin: 0;
  //line-height: $box-heading-height - 3*$box-padding + 1;
  padding-right: 3*$box-padding;
  //display: inline-block; //TODO: breaks heading links
  position: relative;
  & > a{
    position: relative;
    z-index: 2;
  }
  &:before{
    //opacity: 0.75;
    margin-right: 0.5*$gap;
    //font-size: 1.2em;
  }
  @extend %pseudo-after;
  &:after{
    top: 0.5*$gap;
    bottom: 0.5*$gap;
    left: 0.5*$gap;
    //right: -5px;
    min-width: 0.5*$gap;

    margin-right: 0.5*$gap;
    opacity: 0.5;

    text-align: center;
  }

  //@for $i from 1 through (length($palette) - 1) {
  //  .box:nth-of-type(#{$i}) &{
  //    &:after{
  //       background: palete-color($palette,$i);
  //     }
  //  }
  //}
  //background: rgba($color-important, 0.35);
  //@include respond-to(min-medium-screen) {
  //  //padding-right: 75%;
  //  float: left;
  //}
}
%box {
  //@extend %box-shadow;
  @extend %box-padding;
  @extend %box-border;
  @extend %box-inside;
  @extend %clearfix;

  margin-bottom: $gap;

  @include respond-to(min-menu-collapse) {
    margin-bottom: $box-margin;
  }

  //background: mix($color-foreground,$color-background);
  background: $color-foreground;

  position: relative;
  //overflow: hidden;
  .box{
    @extend %reset-box;
    margin: 0 (-$box-padding);
    padding: 0 $box-padding;
    &~.box{
      border-top: 1px solid $color-border-minor;
      //margin-top: $box-padding;
    }
    .box{
      margin: 0;
      padding: 0;
    }
    .module-toggle-button {
      .expander{
        right: 0
      }
    }
    .module-heading-links{
      right: $box-padding;
    }
  }
  .easy-content-page &{
    //border-top: 1px solid $color-border;
    @extend %compositor-layer;
  }
  .easy-entity-update &{
    border-top: none;
  }
  .easy-content-page{
    @extend %reset-box;
    overflow: visible;
  }
  #sidebar &,#easy_grid_sidebar &,#sidebarClone &,#easy_grid_sidebarClone &{
    @extend %reset-box;
    border-top: 1px solid $color-border-minor;
  }
}