%tabheader {
    background-color: #{'shade(@tab_base_color, 0.95)'};

    @if $color-scheme == "dark" {
        background-color: #{'shade(@tab_base_color, 0.87)'};
    }


    $gradient:
        rgba(black, 0),
        rgba(black, 0) calc(100% - #{rem(2px)}),
        rgba(black, 0.05) calc(100% - #{rem(1px)}),
        rgba(black, 0.15);

    background-image: linear-gradient(to bottom, $gradient);

    &.bottom {
        background-image: linear-gradient(to top, $gradient);
    }

    &.right {
        background-image: linear-gradient(to left, $gradient);
    }

    &.left {
        background-image: linear-gradient(to right, $gradient);
    }

    &:backdrop {
        background-color: #{'shade(@tab_base_color, 0.98)'};
    }
}

notebook {
    header {
        @extend %tabheader;

        // Matches the new tab and history buttons
        > box > button.image-button,
        > button.image-button {
            min-width: rem(24px);
        }

        arrow {
            -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
            min-height: 16px;
            min-width: 16px;

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

            &:disabled {
                color: $insensitive-fg-color;
            }
        }
    }

    viewport {
        background-color: bg-color(1);
    }
}

tab {
    border-radius: rem(3px);
    transition: all duration("in-place") $easing;

    .bottom &,
    .top & {
        margin: rem(3px) 0;
    }

    .left &,
    .right & {
        margin: 0 rem(3px);
    }

    // Not scaled because it's based on icon size
    min-width: 24px;
    padding: rem(3px);

    &:hover:not(:checked):not(:selected) {
        background-color: #{'shade(@tab_base_color, 0.9)'};
    }

    &:checked,
    &:selected {
        background-color: #{'@tab_base_color'};
        box-shadow:
            outset-highlight(),
            0 0 0 1px scale-color($border-color, $alpha: -20%),
            outset-shadow(2);

        &:backdrop {
            background-color: #{'shade(@tab_base_color, 0.97)'};
        }
    }
}
