@import "button";


/**********
 ! Notebook
***********/

@include exports("notebook") {

notebook {
  padding: 0;

  &.frame {
    border: 1px solid $borders_color;

    > header {
      // ugly hack to hide the borders around the header
      margin: -1px;
      &.top { margin-bottom: 0; }
      &.bottom { margin-top: 0; }
      &.left { margin-right: 0; }
      &.right { margin-left: 0; }

      &.top, &.bottom { padding-left: 0; padding-right: 0; }
      &.left, &.right { padding-top: 0; padding-bottom: 0; }
    }
  }

  > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
    background-color: $bg_color;
  }

  > header {
    padding: $spacing;
    background-color: $bg_color;

    &.top {    box-shadow: inset  0  -1px $borders_color; }
    &.bottom { box-shadow: inset  0   1px $borders_color; }
    &.right {  box-shadow: inset  1px 0   $borders_color; }
    &.left {   box-shadow: inset -1px 0   $borders_color; }

  @each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) {
      // sizing and borders
      &.#{$_pos} {
        padding-#{$_bpos}: 0;

        > tabs > tab {
          padding: $spacing $spacing + 8px;
          min-width: 20px;
          min-height: 20px;

          outline-offset: -4px;

          border: 1px solid transparent;
          border-#{$_bpos}: none;
          border-#{$_pos}-width: 3px;

          &:checked {
              border-#{$_pos}-color: $selected_bg_color;
          }

          // tab overlap
          + tab {
            @if $_pos==top or $_pos==bottom { margin-left: -1px; }
            @else { margin-top: -1px; }
          }


          // tab border radius
          @if $_pos==top { border-radius: 1px 1px 0 0; }
          @else if $_pos==bottom { border-radius: 0 0 1px 1px; }
          @else if $_pos==left { border-radius: 1px 0 0 1px; }
          @else if $_pos==right { border-radius: 0 1px 1px 0; }
        }
      }
    }
    // overflow arrows
    &.top, &.bottom {
      > tabs > arrow.up {
        -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
        &:last-child { margin-left: 2px; }
      }
      > tabs > arrow.down {
        -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
        &:first-child { margin-right: 2px; }
      }
    }
    &.left, &.right {
      > tabs > arrow.up {
        -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
        &:last-child { margin-top: 2px; }
      }
      > tabs > arrow.down {
        -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
        &:first-child { margin-bottom: 2px; }
      }
    }
    > tabs > arrow {
    @extend %close_button;
      color: $insensitive_fg_color;

      &:hover { color: mix($fg_color, $insensitive_fg_color, 0.5); }
      &:active { color: $fg_color; }
      &:disabled { color: alpha($insensitive_fg_color,0.3); }
    }

    // tab colors

    &.top > tabs > tab:hover:not(:checked) { box-shadow: inset 0 -1px $borders_color; }
    &.bottom > tabs > tab:hover:not(:checked) { box-shadow: inset 0 1px $borders_color; }
    &.left > tabs > tab:hover:not(:checked) { box-shadow: inset -1px 0 $borders_color; }
    &.right > tabs > tab:hover:not(:checked) { box-shadow: inset 1px 0 $borders_color; }

    > tabs > tab {
      color: alpha($fg_color, 0.8);
      background-color: alpha(mix($bg_color, $fg_color, .1), 0.7);

      &:hover:not(:checked) {
        color: mix($fg_color, $insensitive_fg_color, 0.5);
        background-color: transparentize($base_color, 0.5);
        border-color: $borders_color;
      }
      &:checked {
        border-color: $borders_color;
        color: $fg_color;
        background-color: $bg_color;
      }
      // close button
      button.flat {
        min-height: 22px;
        min-width: 16px;
        padding: 0;
        color: mix($bg_color, $fg_color, 0.35);

        &:hover {
          @extend %undecorated_button;
          color: lighten(red, 15%);
        }
        &:active, &:active:hover {
          @extend %undecorated_button;
          color: $selected_bg_color;
        }
      }
    }

  }
}

}