//
// Notebooks and Tabs
//
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: $base_color;
  }

  > header {
    padding: 2px;
    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: 2px 10px;
          min-width: 20px;
          min-height: 20px;

          outline-offset: -4px;

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

          // 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 {
      color: $insensitive_fg_color;

      &:hover {
        color: mix($fg_color, $insensitive_fg_color, 50%);
      }
      &:active {
        color: $fg_color;
      }
      &:disabled {
        color: transparentize($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: $insensitive_fg_color;
      background-color: transparentize($base_color, 1);

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

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

    /* button in headers */
    button.flat {
      padding: 2px;
    }
  }
}