/*************
 * Notebooks *
 *************/
notebook {
        border-color:#b0b9c9;
  > header {
    padding: 1px;
    border-color:  #b0b9c9;
    box-shadow: 1px 1px $bg_color,  1px -1px $bg_color, -1px -1px $bg_color; 
    border-width: 1px;
    background-color:  transparentize(#000, 1.0) ;

    > tabs { margin: -1px; }

    &.top {
      border-bottom-style: solid;
      > tabs {
         
        margin-bottom: -2px;
        margin-top: 4px;
        > tab {
          border-width: 1px;
          border-style: solid;
          border-color:  #b0b9c9;
                    box-shadow: inset 0px 1px #fff, inset 1px 0px #fff, inset -1px 0px #fff;
          background-image: linear-gradient(to bottom, #bfcddb, #c9d6e4 50%, #d6e3f1);
          &:hover { box-shadow: inset 0px 1px #fff, inset 1px 0px #fff, inset -1px 0px #fff; }


          &:checked { border-width: 1px;
          border-style: solid;  box-shadow:  inset 0px 2px #fff,inset 0px 1px  #b0b9c9, inset 1px 0px #fff, inset -1px 0px #fff; 
          background-image: none; background-color:$bg_color}
        }
      }
    }

    &.bottom {
      border-top-style: solid;
      > tabs {
        margin-top: -3px;
        > tab {
            border-width: 1px;
          border-style: solid;
           border-color:  #b0b9c9;
                     box-shadow: inset 0px -1px #fff, inset 1px 0px #fff, inset -1px 0px #fff;
                     background-image: linear-gradient(to bottom, #bfcddb, #c9d6e4 50%, #d6e3f1);
          &:hover { box-shadow: inset 0px -1px #fff, inset 1px 0px #fff, inset -1px 0px #fff; }

          &:checked { border-width: 1px;
          border-style: solid;  box-shadow:  inset 0px -2px #fff,inset 0px -1px  #b0b9c9, inset 1px 0px #fff, inset -1px 0px #fff;; 
          background-image: none; background-color: $bg_color}
        }
      }
    }

    &.left {
      border-right-style: solid;
      > tabs {
        margin-right: -3px;
        > tab {
           border-width: 1px;
          border-style: solid;
           border-color:  #b0b9c9;
                      box-shadow:  inset 0px -1px  #fff, inset 1px 0px #fff, inset 0px 1px #fff;
                     background-image: linear-gradient(to bottom, #bfcddb, #c9d6e4 50%, #d6e3f1);
          &:hover { box-shadow:  inset 0px -1px  #fff, inset 1px 0px #fff, inset 0px 1px #fff; }

          &:checked { border-width: 1px;
          border-style: solid;  box-shadow:  inset 0px -1px  #fff, inset 1px 0px #fff, inset 0px 1px #fff;; 
          background-image: none; background-color: $bg_color }
        }
      }
    }

    &.right {
      border-left-style: solid;
      > tabs {
        margin-left: -3px;
        > tab {
           border-width: 1px;
          border-style: solid;
           border-color:  #b0b9c9;
           border-left-color: $bg_color;
                      box-shadow:  inset 0px 1px  #fff, inset -1px 0px #fff, inset 0px -1px #fff;
                     background-image: linear-gradient(to bottom, #bfcddb, #c9d6e4 50%, #d6e3f1);
          &:hover {  box-shadow:  inset 0px 1px  #fff, inset -1px 0px #fff, inset 0px -1px #fff; }

          &:checked { border-width: 1px;
          border-style: solid;
           box-shadow:  inset 0px 1px  #fff, inset -1px 0px #fff, inset 0px -1px #fff; 
           background-image: none; background-color: $bg_color}
        }
      }
    }

    &.top > tabs > arrow {
      @extend %notebook_vert_arrows;
       border-color: #b0b9c9;
      border-top-style: none;
    }

    &.bottom > tabs > arrow {
      @extend %notebook_vert_arrows;

      border-bottom-style: none;
    }

    @at-root %notebook_vert_arrows {
      margin-left: -5px;
      margin-right: -5px;
      padding-left: 4px;
      padding-right: 4px;

      &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }

      &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
    }

    &.left > tabs > arrow {
      @extend %notebook_horz_arrows;

      border-left-style: none;
    }

    &.right > tabs > arrow {
      @extend %notebook_horz_arrows;

      border-right-style: none;
    }

    @at-root %notebook_horz_arrows {
      margin-top: -5px;
      margin-bottom: -5px;
      padding-top: 4px;
      padding-bottom: 4px;

      &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }

      &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
    }

    > tabs > arrow {
      @extend %button_basic;

      @extend %button_basic_flat;

      min-height: 16px;
      min-width: 16px;
      border-radius: 0;

      &:hover:not(:active):not(:backdrop) {
        background-clip: padding-box;
        background-image: none;
        background-color: transparentize(white, 0.7);
        border-color: transparent;
        box-shadow: none;
      }

      &:disabled { @include button(undecorated); }
    }

    > tabs > tab {
      transition: $focus_transition;
      min-height: 27px;
      min-width: 30px;
      padding: 3px 12px;

      color: $fg_color;
      font-weight: normal;

      border-width: 1px;         // for reorderable tabs
      border-color: transparent; //

      &:hover {
        color: $fg_color;
        background-color: darken($dark_fill,4%);

        &.reorderable-page {
          border-color:  #b0b9c9;
          background-color: transparentize($bg_color, 0.8);
        }
      }

      &:not(:checked) {
        outline-color: transparent;
      }

      &:checked {
        color: $fg_color;
        &.reorderable-page {
          border-color: transparentize($borders_color, 0.5);
          background-color: transparentize($bg_color, 0.5);

          &:hover { background-color: transparentize($bg_color, 0.3); }
        }
      }

      // colors the button like the label, overridden otherwise
      button.flat {
        color: gtkalpha(currentColor, 0.3);
        &:hover { color: currentColor; }

        padding: 0;
        margin-top: 4px;
        margin-bottom: 4px;
        // FIXME: generalize .small-button?
        min-width: 20px;
        min-height: 20px;

        &:last-child {
          margin-left: 4px;
          margin-right: -4px;
        }

        &:first-child {
          margin-left: -4px;
          margin-right: 4px;
        }
      }
    }

    &.top,
    &.bottom {
      > tabs {
        padding-left: 0px;
        padding-right: 0px;

        &:not(:only-child) {
          margin-left: 1px;
          margin-right: 1px;

          &:first-child { margin-left: 0px; }
          &:last-child { margin-right: -1px; }
        }

        > tab {
          margin-left: 0px;
          margin-right: 0px;

          &.reorderable-page { border-style: none solid; }
        }
      }
    }

    &.left,
    &.right {
      > tabs {
        padding-top: 0px;
        padding-bottom: 0px;

        &:not(:only-child) {
          margin-top: 0px;
          margin-bottom: 0px;

          &:first-child { margin-top: 0px; }
          &:last-child { margin-bottom: -1px; }
        }

        > tab {
          margin-top: 0px;
          margin-bottom: 0px;

          &.reorderable-page { border-style: solid; }
        }
      }
    }

    &.top > tabs > tab { padding-bottom: 1px; }
    &.bottom > tabs > tab { padding-top: 1px; }
  }


   &.frame  {
     border-color:#b0b9c9;
  }

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