/*************
 * Notebooks *
 *************/
notebook {
  > header {
    border-width: $border_size;
    border-color: $border_color;
    background-color: $bg_color;
    background-clip: border-box;

    &.top {
      border-bottom-style: solid;
      > tabs {
        margin-bottom: -1px;
        > tab {

          &:hover { box-shadow: inset 0 -2px $track_color; }

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

    &.bottom {
      border-top-style: solid;
      > tabs {
        margin-top: -1px;
        > tab {

          &:hover { box-shadow: inset 0 2px $track_color; }

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

    &.left {
      border-right-style: solid;
      > tabs {
        margin-right: -1px;
        > tab {

          &:hover { box-shadow: inset -2px 0 $track_color; }

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

    &.right {
      border-left-style: solid;
      > tabs {
        margin-left: -1px;
        > tab {

          &:hover { box-shadow: inset 2px 0 $track_color; }

          &:checked { box-shadow: inset 2px 0 $accent_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 {
      padding-left: $tiny_padding;
      padding-right: $tiny_padding;

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

      &.up {
        margin-right: -$small_padding;
        -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 {
      padding-top: $tiny_padding;
      padding-bottom: $tiny_padding;

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

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

    > tabs > arrow {
      @extend %simple_flat_button;

      min-height: $small_size;
      min-width: $small_size;
      border-radius: 0;
    }

    tab {
      transition: $longer_transition,
                  background-size 0,
                  background-image 0;
      min-height: $small_size;
      min-width: $small_size;
      padding: $container_padding $tiny_padding;

      outline-offset: -6px;

      border-width: $border_size;         // for reorderable tabs
      border-color: transparent; //

      background-image: radial-gradient(circle farthest-corner at center,
                                        $accent_color 10%,
                                        transparent 0%);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 0% 0%;

      color: $secondary_fg_color;
      font-weight: 500;

      &:hover {
        color: $fg_color;

        &.reorderable-page {
          border-color: $border_color;
          background-color: $alt_base_color;
        }
      }

      &:disabled { color: $disabled_secondary_fg_color; }

      &:checked {
        transition: $longer_transition,
                    background-size $longer_duration $deceleration_curve,
                    background-image $longer_duration + $ripple_duration $deceleration_curve;
        background-image: radial-gradient(circle farthest-corner at center,
                                          transparent 10%,
                                          transparent 0%);
        background-size: 1000% 1000%;
        color: $fg_color;

        &:disabled { color: $disabled_fg_color; }

        &.reorderable-page {
          border-color: $border_color;
          background-color: $base_color;
        }
      }

      // colors the button like the label, overridden otherwise
      button.flat {
        @extend %small_button;

        &:last-child {
          margin-left: $tiny_padding;
          margin-right: -$tiny_padding;
        }

        &:first-child {
          margin-left: -$tiny_padding;
          margin-right: $tiny_padding;
        }
      }
    }

    &.top,
    &.bottom {
      tabs {
        padding-left: $small_padding;
        padding-right: $small_padding;

        &:not(:only-child) {
          &:first-child { margin-left: 0; }
          &:last-child { margin-right: 0; }
        }

        tab {
          &.reorderable-page {
            margin: 0 -1px;
            border-style: none solid;
          }
        }
      }
    }

    &.left,
    &.right {
      tabs {
        padding-top: $small_padding;
        padding-bottom: $small_padding;

        &:not(:only-child) {
          &:first-child { margin-top: 0; }
          &:last-child { margin-bottom: 0; }
        }

        tab {
          &.reorderable-page {
            margin: -1px 0;
            border-style: solid none;
          }
        }
      }
    }
  }

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

    button.combo { @extend %combo_flat; }
  }
}

