%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>&, .collapsible:not(.collapsed) &{
    @include rotate(-225deg);
  }
}
%control-close-small{
  @extend %control-close;
  width: $gap;
  height: $gap;
  margin: (0.25*$gap - 1) 0.5*$gap;
}
%control-arrow{
  @extend %flex;
  line-height: normal;
  font-size: $font-size;

  h2 &{
    bottom: -0.75em;
  }
  &>span{
    @extend %hidden;
  }
  @include transition(all 0.125s ease-out);
  &: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;
  float: right;
  @extend %justify-content-flex-end;
  //margin-left: 2*$gap;
  &:before{
    order: 2;
    border-top: 2px solid $color-border;
    border-right: 2px solid $color-border;
    @extend %rotate-45cw;
  }
  &:hover{
    //@include translateX(3px);
    &:before{
      border-top-color: darken($color-border,10%);
      border-right-color: darken($color-border,10%);
    }
  }
}
%control-arrow-prev{
  @extend %control-arrow;
  float: left;
  @extend %justify-content-flex-start;

  //margin-right: 2*$gap;
  &:before{
    border-bottom: 2px solid $color-border;
    border-left: 2px solid $color-border;
    @extend %rotate-45cw;
  }
  &:hover{
    //@include translateX(-3px);
    &:before{
      border-bottom-color: darken($color-border,10%);
      border-left-color: darken($color-border,10%);
    }
  }
}
%control-arrow-down{
  @extend %control-arrow;
  &:before{
    border-top: 2px solid $color-border;
    border-right: 2px solid $color-border;
    border-bottom: none;
    border-left: none;
    @extend %rotate-135cw;
  }
  &:hover{
   //@include translate(0, 3px);
  }
}
%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: 50%;
  left: 0;
  right: 0;

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