@charset "UTF-8";

/*****************
 * Notebooks and *
 * Tabs          *
 *****************/
 /*************
  * Notebooks *
  *************/
 notebook {
   &.frame {
     border: none;
     padding: 0px;
     box-shadow: inset 0px 0px 0px 1px gtk("@borders");
   }

   > header {
     padding: 0px;
     border: none;
     background-color: gtk("@theme_bg_color");
     //box-shadow: inset 0 -1px gtk("@borders");

     &.top {
       box-shadow: inset 0 -1px gtk("@borders"); // border
       &:backdrop { box-shadow: inset 0 -1px gtk("@unfocused_borders"); }
     }
     &.bottom {
       box-shadow: inset 0 1px gtk("@borders");
       &:backdrop { box-shadow: inset 0 1px gtk("@unfocused_borders"); }
     }
     &.right {
       box-shadow: inset 1px 0 gtk("@borders");
       &:backdrop { box-shadow: inset 1px 0 gtk("@unfocused_borders"); }
     }
     &.left {
       box-shadow: inset -1px 0 gtk("@borders");
       &:backdrop { box-shadow: inset -1px 0 gtk("@unfocused_borders"); }
     }
     &:backdrop {
       background-color: gtk("@theme_unfocused_bg_color");
     }

     tabs {
      margin: 0px;
    }


    @each $_tab, $_border, $_radius in  (top,bottom,3px 3px 0px 0px),
                                        (bottom,top,0px 0px 3px 3px),
                                        (left,right, 3px 0px 0px 3px),
                                        (right,left, 0px 3px 3px 0px) {
      &.#{$_tab} {
        > tabs {
          > tab {
            padding: 4px 6px;
            border: 1px solid gtkalpha(gtk("@theme_fg_color"), 0.2);
            background-color: gtkalpha(gtk("@theme_fg_color"), 0.2);
            border-radius: #{$_radius};
            border-#{$_border}-color: transparent;
            &:hover, &.prelight-page {
              background-color: gtkalpha(gtk("@theme_selected_bg_color"), 0.2);
              border-color:     gtkalpha(gtk("@theme_selected_bg_color"), 0.2);
            }
            &:checked {
              border-color: gtk("@borders");
              border-#{$_border}-color: gtk("@theme_bg_color");
              background-color: gtk("@theme_bg_color");
              &:backdrop {
                border-color: gtk("@unfocused_borders");
                border-#{$_border}-color: gtk("@theme_unfocused_bg_color");
                background-color: gtk("@theme_unfocused_bg_color");
              }
            }
          }
        }
      }
    }

    @each $_tab, $_border, $_shadow1 in (top, right, -3px 0px 0px 0px),
                             (bottom, right, -3px 0px 0px 0px),
                             (left, bottom, 0px -3px 0px 0px),
                             (right, bottom, 0px -3px 0px 0px) {
      &.#{$_tab} {
        > tabs {
          > tab {
            &.reorderable-page {
            border-width: 3px;
            border-style: solid;
            border-color: transparent;
            background-color: gtk("@theme_bg_color");
            background-clip: padding-box;
            border-#{$_border}-width: 1px;
            border-#{$_border}-color: gtk("@borders");
            box-shadow: inset #{$_shadow1} gtk("@theme_bg_color");
              &:hover, &.prelight-page {
                box-shadow: inset 0px -3px 0px 0px gtkalpha(gtk("@theme_selected_bg_color"),0.2), inset $_shadow1 gtk("@theme_bg_color");
              }
              &:checked {
                box-shadow: inset 0px -3px 0px 0px gtk("@theme_selected_bg_color"), inset $_shadow1 gtk("@theme_bg_color");
                &:backdrop {
                  background-color: gtk("@theme_unfocused_bg_color");
                  border-color: transparent;
                  border-#{$_border}-color: gtk("@unfocused_borders");
                  box-shadow:none;
                }
              }
              &:backdrop {
                background-color: gtk("@theme_unfocused_bg_color");
                border-#{$_border}-color: gtk("@unfocused_borders");
                box-shadow:none;
              }
            }
          }
        }
      }
    }



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

       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); }
     }


   // colors the button like the label, overridden otherwise
   button.flat {
     padding: 0;
     margin: 4px;
     // FIXME: generalize .small-button?
     min-width: 12px;
     min-height: 12px;
     border: 0px solid;
     border-radius: 50%;
     color: gtk("@theme_bg_color");
     background-color: gtk("@borders");
     background-image: none;
     &:hover {
      background-color: $error_color;
    }
    &:active { background-color: $error_color;}

    &:backdrop { 
      background-color: gtk("@unfocused_borders");
      color: gtk("@theme_unfocused_bg_color");
    }
   }
 }


  > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
     background-color: transparent;
     border-style: solid;
     border-color: gtk("@borders");
     border-width: 0px;
   }
}
