%control-close{
  $size: $box-heading-height - 3*$gap;
  width: $size;
  height: $size;
  //height: $box-heading-height - 2;
  //z-index: z($z-priority,contextual);
  position: relative;
  cursor: pointer;
  &:before,&:after {
    @extend %pseudo-block;
    position: absolute;
  }
  &:before {
    width: 100%;
    top: 50%;
    right: 0;
    border-bottom: 2px solid $color-border;
    margin-top: -1px;
  }
  &:after{
    height: 100%;
    left: 50%;
    top: 0;
    border-right: 2px solid $color-border;
    margin-left: -1px;
  }
  &:hover{
    &:before,&:after {
      border-color: darken($color-border,10%);
    }
  }
  @include transition(all 0.25s ease-out);
  .open>&, .collapsed &{
    @include rotate(-225deg);
  }
}
%control-close-small{
  @extend %control-close;
  width: $gap;
  height: $gap;
  margin: (0.25*$gap - 1) 0.5*$gap;
}
%control-arrow-vertical{
  &:before, &:after{
    @include translateY(-50%);
  }
}
%control-arrow-horizontal{
  &:before, &:after{
    @include translate(1px,-50%);
  }
}
%control-arrow{
  display: flex;
  line-height: normal;
  font-size: $font-size;
  cursor: pointer;

  h2 &{
    bottom: -0.75em;
  }
  &>span{
    @extend %hidden;
  }
  @include transition(all 0.125s ease-out);

  &:before, &:after{
    @include translate(1px,-50%);
  }

  //&:before{
  //  //@extend %pseudo-block;
  //  content: "" !important;
  //  height: 1em;
  //  width: 1em;
  //  cursor: pointer;
  //  @include transition(all 0.25s ease-out);
  //  position: relative;
  //  //border: 2px solid transparent;
  //  //bottom: -0.25em;
  //}
  &:hover{
  }
}

%control-arrow-next{
  @extend %control-arrow;
  @include triangle-right(.5*$gap, darken($color-border, 10%), false, 50%);
  float: right;
  padding-right: $gap;
  justify-content: flex-end;
  &:after{
    order: 2;
    left: auto;
  }
  &:hover{
    &:before{
      border-right-color: darken($color-border,20%);
    }
  }
}
%control-arrow-prev{
  @extend %control-arrow;
  @include triangle-left(.5*$gap, darken($color-border, 10%), false, 50%);
  float: left;
  padding-left: $gap;
  justify-content: flex-end;
  &:after{
    order: 2;
    right: auto;
  }
  &:hover{
    &:after{
      border-right-color: darken($color-border,20%);
    }
  }
}
%control-arrow-down{
  @extend %control-arrow;
  @include triangle-bottom(.5*$gap, $color-border, false, 50%);
  &:after{
    bottom: -1
  }
  &:hover{
    &:after{
      border-right-color: darken($color-border,10%);
    }
  }
}
%control-arrow-top{
  @extend %control-arrow;
  &:before{
    border-bottom: 2px solid $color-border;
    border-left: 2px solid $color-border;
    border-right: none;
    border-top: none;
    @extend %rotate-135cw;
  }
  &:hover{
    //@include translate(0, -3px);
  }
}

%control-menu-buttons{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  //@extend %translateY-correction;

  a,button,span {
    display: block;
    position: absolute !important;
    top: 0;
    bottom: 0;
    z-index: z($z-priority,newissue);
    height: $tab-height;
    //width: $box-margin;
    outline: none;
    background: $color-background;
    @extend %box-shadow-background;
    border: none;
    height: $tab-height;
    @include respond-to(max-sidebar-collapse){
      //width: 2.5*$box-padding;
      justify-content: center !important;
    }
    i, img{
      display: none;
    }
    &:first-child{
      @extend %control-arrow-prev;
      //@extend %gradient-horizontal-background-fade;
      left: 0;
      padding-left: $gap;
      //margin-right: -$gap;
      //&:before{
      //  float: left;
      //  bottom: 0;
      //  left: -.5*$gap;
      //  //margin-left: $box-padding;
      //}

      &:after{
        left: 0;
      }

      .box &, .easy-content-page &{
        //@extend %gradient-horizontal-foreground-fade;
        background: $color-foreground;
        @extend %box-shadow-foreground;
      }
    }
    &:last-child{
      @extend %control-arrow-next;
      //@extend %gradient-horizontal-fade-background;
      right: 0;
      padding-right: $gap;
      //margin-left: -$gap;
      //&:before{
      //  float: right;
      //  bottom: 0;
      //  right: -.5*$gap;
      //  //margin-right: $box-padding;
      //}
      &:after{
        right: 0;
      }
      .box &, .easy-content-page &{
        //@extend %gradient-horizontal-fade-foreground;
        background: $color-foreground;
        @extend %box-shadow-foreground;
      }
    }
  }
}
%layout-control {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 0;
  @include respond-to(max-sidebar-collapse) {
    display: none;
  }
  a {
    display: block;
    text-align: center;
    @extend %absolute;
    left: 0;
    width: $gap;
    color: darken($color-border, 10%);
    z-index: 1;
    //background: $color-background;
    &:hover {
      color: $color-important;
      text-decoration: none;
    }
    &:before {
      @include icon(more-vert);
      display: block;
      font-size: $font-h3;
      line-height: 1.8*$box-padding;
      position: absolute;
      top: 50%;
      margin-top: -$gap - $box-padding;
    }
  }
}