/*************
 * Notebooks *
 *************/
notebook {
  > header {
    border: none;

    &.top {
      border-bottom-style: solid;
      > tabs {
        > tab {
          &:hover { box-shadow: inset 0 -2px $borders_color; }

          &:backdrop { box-shadow: none; }

          &:checked { box-shadow: inset 0 -2px $selected_bg_color; }
        }
      }
    }

    &.bottom {
      border-top-style: solid;
      > tabs {
        > tab {
          &:hover { box-shadow: inset 0 2px $borders_color; }

          &:backdrop { box-shadow: none; }

          &:checked { box-shadow: inset 0 2px $selected_bg_color; }
        }
      }
    }

    &.left {
      border-right-style: solid;
      > tabs {
        > tab {
          &:hover { box-shadow: inset -2px 0 $borders_color; }

          &:backdrop { box-shadow: none; }

          &:checked { box-shadow: inset -2px 0 $selected_bg_color; }
        }
      }
    }

    &.right {
      border-left-style: solid;
      > tabs {
        > tab {
          &:hover { box-shadow: inset 2px 0 $borders_color; }

          &:backdrop { box-shadow: none; }

          &:checked { box-shadow: inset 2px 0 $selected_bg_color; }
        }
      }
    }

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

    tab {
      min-height: 30px;
      min-width: 30px;
      padding: 3px 12px;

      outline-offset: -5px;

      color: $insensitive_fg_color;
      font-weight: bold;

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

      &:hover {
        color: mix($insensitive_fg_color, $fg_color, 50%);

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

      &:backdrop {
        color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);

        &.reorderable-page {
          border-color: transparent;
          background-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); }
        }
      }

      &:backdrop:checked {
        color: $backdrop_fg_color;

        &.reorderable-page {
          border-color: $backdrop_borders_color;
          background-color: $backdrop_bg_color;
        }
      }

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

        &, &:backdrop { color: gtkalpha(currentColor, 0.3); }

        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: 4px;
        padding-right: 4px;

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

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

        tab {
          margin-left: 4px;
          margin-right: 4px;

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

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

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

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

        tab {
          margin-top: 4px;
          margin-bottom: 4px;

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

    &.top tab { padding-bottom: 4px; }
    &.bottom tab { padding-top: 4px; }
  }

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

    &:backdrop { background-color: $backdrop_base_color; }
  }
}

notebook,
.dynamic-notebook,
.notebook {
  padding:0;
  background-color: $base_color;
  box-shadow:0 0 0 1px $borders_color;
  background-clip: border-box;

  > header,
  > .header {
    border: none;
    box-shadow:none;
    background-color: $bg_color;
  }

  > tab {
    border-radius: 0;
    background-color: $bg_color;

    &.top {
      padding: 6px 8px 8px 8px;
      box-shadow:inset 0 -1px 0 0 $borders_color;

      &:active {
        box-shadow:inset 0 -3px 0 0 $borders_color;

        &:backdrop {
          box-shadow:inset 0 -3px 0 0 $backdrop_borders_color;
        }

      }

      &:backdrop {
        box-shadow:inset 0 -1px 0 0 $backdrop_borders_color;
      }

      &:disabled {
        box-shadow:inset 0 -1px 0 0 $insensitive_borders_color;
      }
    }

    &.bottom {
      padding: 8px 8px 6px 8px;
      box-shadow:inset 0 1px 0 0 $borders_color;

      &:active {
        box-shadow:inset 0 3px 0 0 $borders_color;

        &:backdrop {
          box-shadow:inset 0 3px 0 0 $backdrop_borders_color;
        }
      }

      &:backdrop {
        box-shadow:inset 0 1px 0 0 $backdrop_borders_color;
      }

      &:disabled {
        box-shadow:inset 0 1px 0 0 $insensitive_borders_color;
      }
    }

    &.left {
      padding: 8px;
      box-shadow:inset -1px 0 0 0 $borders_color;

      &:active {
        box-shadow:inset -3px 0 0 0 $borders_color;

        &:backdrop {
          box-shadow:inset -3px 0 0 0 $backdrop_borders_color;
        }
      }

      &:backdrop {
        box-shadow:inset -1px 0 0 0 $backdrop_borders_color;
      }

      &:disabled {
        box-shadow:inset -1px 0 0 0 $insensitive_borders_color;
      }
    }

    &.right {
      padding: 8px;
      box-shadow:inset 1px 0 0 0 $borders_color;

      &:active {
        box-shadow:inset 3px 0 0 0 $borders_color;

        &:backdrop {
          box-shadow:inset 3px 0 0 0 $backdrop_borders_color;
        }
      }

      &:backdrop {
        box-shadow:inset 1px 0 0 0 $backdrop_borders_color;
      }

      &:disabled {
        box-shadow:inset 1px 0 0 0 $insensitive_borders_color;
      }
    }

    &:active {
      font-weight: bold;
    }

    &:hover {
      background: darken($bg_color, 5%);
    }
  }
}