/**************
 * Scrollbars *
 **************/

scrollbar {
    background-image: none;
    border-style: solid;
    border-color: shade(@button_border, 1.13);
    -GtkScrollbar-has-backward-stepper: true;
    -GtkScrollbar-has-forward-stepper: true;
    -GtkScrollbar-activate-slider: 1;
    -GtkScrolledWindow-scrollbar-spacing: 0;
}

/* broken firefox ignore background of trough */
scrollbar.horizontal {
    background-image: -gtk-gradient (linear, left top, right top,
                                     from (shade (@theme_bg_color, 0.98)),
                                     to (shade (@theme_bg_color, 1.06)));
}

scrollbar.vertical {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@theme_bg_color, 0.98)),
                                     to (shade (@theme_bg_color, 1.06)));
}

scrollbar.vertical {
    border-width: 0px 0px 0px 1px;
    min-width: 10px;
}

scrollbar.horizontal {
    border-width: 1px 0px 0px 0px;
    min-height: 10px;
}

scrollbar.vertical trough {
    min-width: 13px;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@theme_bg_color, 0.98)),
                                     to (shade (@theme_bg_color, 1.06)));
    border-radius: 0;
    border-style: none;
    box-shadow: none;
}

scrollbar.horizontal trough {
    min-height: 13px;
    background-image: -gtk-gradient (linear, left top, right top,
                                     from (shade (@theme_bg_color, 0.98)),
                                     to (shade (@theme_bg_color, 1.06)));
    border-radius: 0;
    border-style: none;
    box-shadow: none;
}

scrollbar trough:disabled {
    background-color: shade (@theme_bg_color, 1.06);
}

/* Sliders */
scrollbar.vertical slider,
scrollbar.vertical .slider {
    min-width: 13px;
    min-height: 31px;
    margin: 1px -1px 1px -1px;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@theme_bg_color, 0.95)),
                                     to (shade (@theme_bg_color, 0.8)));
    border-color: shade(@button_border, 1.13);
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
}

scrollbar.vertical slider:hover,
scrollbar.vertical slider:hover:active,
scrollbar.vertical .slider:hover,
scrollbar.vertical .slider:hover:active {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@theme_bg_color, 0.7)),
                                     to (shade (@theme_bg_color, 0.85)));
    border-color: shade (@theme_bg_color, 0.85);
}

scrollbar.horizontal slider,
scrollbar.horizontal .slider {
    min-width: 31px;
    min-height: 13px;
    background-image: -gtk-gradient (linear, left top, right top,
                                     from (shade (@theme_bg_color, 0.95)),
                                     to (shade (@theme_bg_color, 0.8)));
    border-color: shade(@button_border, 1.13);
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
}

scrollbar.horizontal slider:hover,
scrollbar.horizontal slider:hover:active,
scrollbar.horizontal .slider:hover,
scrollbar.horizontal .slider:hover:active {
    background-image: -gtk-gradient (linear, left top, right top,
                                     from (shade (@theme_bg_color, 0.7)),
                                     to (shade (@theme_bg_color, 0.85)));
    border-color: shade (@theme_bg_color, 0.85);
}

scrollbar slider:disabled,
scrollbar .slider:disabled {
    background-color: shade (@theme_bg_color, 0.9);
}

/* Buttons */
scrollbar.vertical button,
scrollbar.vertical .button {
    min-width:13px;
    min-height: 16px;
    padding: 0px;
}

scrollbar.horizontal button,
scrollbar.horizontal .button {
    min-width:16px;
    min-height: 13px;
    padding: 0px;
}

scrollbar button,
scrollbar button:hover,
scrollbar button:hover:active,
scrollbar button:disabled,
scrollbar .button,
scrollbar .button:hover,
scrollbar .button:hover:active,
scrollbar .button:disabled {
    box-shadow: none;
    border-style: none;
    border-image: none;
    border-radius: 0;
    background-color: transparent;
}

/* broken firefox */
scrollbar .button {
    background-image: -gtk-gradient (linear,
                                     left top, left bottom,
                                     from (@button_gradient1),
                                     color-stop (0.50, @button_gradient3),
                                     to   (@button_gradient4));
}

scrollbar button:hover,
scrollbar button:hover:active,
scrollbar .button:hover,
scrollbar .button:hover:active {
    background-color: alpha(shade(@scrollbar_trough, 0.8), 0.5);
}

scrollbar.vertical button.up,
scrollbar.vertical .button.up {
    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
    -gtk-icon-effect: highlight;
}

scrollbar.vertical button.down,
scrollbar.vertical .button.down {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
    -gtk-icon-effect: highlight;
}

scrollbar.horizontal button.up,
scrollbar.horizontal .button.up {
    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
    -gtk-icon-effect: highlight;
}

scrollbar.horizontal button.down,
scrollbar.horizontal .button.down {
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
    -gtk-icon-effect: highlight;
}

scrollbar button,
scrollbar .button {
    color: @theme_fg_color;
}

scrollbar button:hover,
scrollbar button:hover:active,
scrollbar .button:hover,
scrollbar .button:hover:active {
    color: @theme_selected_bg_color;
}

scrollbar button:disabled,
scrollbar .button:disabled {
    background-color: @insensitive_bg_color;
    color: @insensitive_fg_color;
}

scrollbar.fine-tune slider:hover:active,
scrollbar.fine-tune .slider:hover:active {
    background-image: url("assets/slider_fine_horizontal.svg"),
                      linear-gradient(to top,
                                      shade(@scrollbar_slider, 0.9),
                                      shade(@scrollbar_slider, 0.81) 55%,
                                      shade(@scrollbar_slider, 0.6));
    background-repeat: no-repeat;
    background-position: center;
    border-style: solid;
    border-image: none;
    border-color: shade(@scrollbar_slider, 0.65);
    border-width: 1px;
}

scrollbar.vertical.fine-tune slider:hover:active,
scrollbar.vertical.fine-tune .slider:hover:active {
    background-image: url("assets/slider_fine_vertical.svg"),
                      linear-gradient(to left,
                                      shade(@scrollbar_slider, 0.9),
                                      shade(@scrollbar_slider, 0.81) 55%,
                                      shade(@scrollbar_slider, 0.6));
    background-repeat: no-repeat;
    background-position: center;
    border-style: solid;
    border-image: none;
    border-color: shade(@scrollbar_slider, 0.65);
    border-width: 1px;
}

/* overlay scrollbar */
OsThumb {
    color: shade (@theme_fg_color, 1.6);
}

OsThumb:selected,
scrollbar.overlay-indicator:selected {
    background-color: @theme_selected_bg_color;
}

OsThumb:active,
scrollbar.overlay-indicator:active {
    background-color: shade (@theme_bg_color, 0.6);
}

OsThumb:disabled,
scrollbar.overlay-indicator:disabled {
    background-color: shade (@theme_bg_color, 0.85);
}

/*******************
 * scrolled window *
 *******************/
scrolledwindow.frame {
    border-top-color: shade (@theme_bg_color, 0.84);
    border-right-color: shade (@theme_bg_color, 0.76);
    border-bottom-color: shade (@theme_bg_color, 0.86);
    border-left-color: shade (@theme_bg_color, 0.76);
    border-radius: 0;
    border-style: solid;
}

 /* the small square between scrollbars!!!
     no borders with background-image */
scrolledwindow junction {
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 1.00),
                                      shade(@theme_bg_color, 1.00));
    border-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 1.00),
                                      shade(@theme_bg_color, 1.00));
    background-color: transparent;
    border-style: none;
    border-width: 0;
    box-shadow: none;
}