/* Header bars */
.header-bar .button.text-button {
    padding: 2px 16px;
}

.header-bar .button.image-button {
    padding: 5px 4px 5px 5px;
}

.header-bar .title {
    font: Bold 11;
}

.header-bar .subtitle {
    font: 9;
}

.header-bar GtkComboBox,
.header-bar .button {
    -GtkWidget-focus-line-width: 1;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.23)),
                                     to (shade (@dark_bg_color, 1.70)));
    color: @dark_fg_color;
    padding: 6px 6px 5px 6px;
    border-color: shade (@dark_bg_color, 0.96);
}

.header-bar GtkComboBox:backdrop,
.header-bar .button:backdrop {
    color: @backdrop_dark_fg_color;
}

.header-bar .button:hover {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (mix (shade (@selected_bg_color, 1.38), shade(@dark_bg_color, 1.1), 0.65)),
                                     to (mix (shade (@selected_bg_color, 1.05), shade(@dark_bg_color, 1.18), 0.65)));

}

.header-bar .button:active {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (mix (shade (@selected_bg_color, 1.38), shade(@dark_bg_color, 1.1), 0.5)),
                                     to (mix (shade (@selected_bg_color, 1.05), shade(@dark_bg_color, 1.18), 0.5)));

}

.header-bar .button:active:hover {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (mix (shade (@selected_bg_color, 1.38), shade(@dark_bg_color, 1.1), 0.4)),
                                     to (mix (shade (@selected_bg_color, 1.05), shade(@dark_bg_color, 1.18), 0.4)));

    border-bottom-color: alpha (shade (@dark_bg_color, 1.26), 0.5);
}

.header-bar .button:active:insensitive,
.header-bar .button:insensitive {
    text-shadow: none;
}

.header-bar .button:insensitive {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.01)),
                                     to (shade (@dark_bg_color, 0.99)));
}

.header-bar .button:active:insensitive {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (mix (shade (@selected_bg_color, 1.32), shade(@dark_bg_color, 1.1), 0.7)),
                                     to (mix (shade (@selected_bg_color, 1.05), shade(@dark_bg_color, 1.18), 0.7)));
}

.header-bar GtkSeparatorToolItem,
.header-bar .separator,
.header-bar .separator:insensitive {
    border-color: shade (@dark_bg_color, 0.96);
    border-bottom-color: alpha (shade (@dark_bg_color, 1.26), 0.5);
    border-right-color: alpha (shade (@dark_bg_color, 1.26), 0.5);
}

.header-bar .menu,
.header-bar .primary-toolbar .menu {
    padding: 3px;
    border-width: 1px;
    background-image: -gtk-gradient (linear, left center, right center,
                                                 from (shade (@dark_bg_color, 1.08)),
                                                 color-stop (0.60, shade (@dark_bg_color, 1.22)),
                                                 to (shade (@dark_bg_color, 1.62)));
    background-color: shade (@dark_bg_color, 1.55);
    color: @dark_fg_color;
    border-bottom-color: shade (@dark_bg_color, 1.18);
    border-left-color: shade (@dark_bg_color, 1.02);
    border-right-color: shade (@dark_bg_color, 1.02);
    border-top-color: shade (@dark_bg_color, 1.18);
}

/*********************************
 * CSD (Client Side Decorations) *
 *********************************/
.titlebar,
.titlebar:backdrop {
	border-radius: 6px 6px 0px 0px;
}

.tiled .titlebar,
.tiled .titlebar:backdrop {
	border-radius: 0;
}

.maximized .titlebar,
.maximized .titlebar:backdrop {
	border-radius: 0;
}

/* this is the default titlebar that is added by GTK
 * when client-side decorations are in use and the application
 * did not set a custom titlebar.
 */
.titlebar.default-decoration,
.titlebar.default-decoration:backdrop {
	border: 1px solid transparent;
	box-shadow: none;
}

.titlebar .title,
.titlebar .title:backdrop {
	font: Bold 10;
}

.titlebar .titlebutton,
.titlebar .titlebutton:backdrop {
	background: none;
	padding: 5px 5px 6px 5px;

	border-radius: 3px;
	border-width: 2px;
	border-color: transparent;
	border-style: solid;
	border-image: none;
}

.titlebar .titlebutton:hover,
.titlebar .titlebutton:hover:backdrop {
}

.titlebar .titlebutton:active,
.titlebar .titlebutton:active:backdrop {
	color: @selected_fg_color;
	icon-shadow: none;
}

.titlebar .right .titlebutton:first-child,
.titlebar .right .titlebutton:first-child:backdrop {
}

.titlebar .right .titlebutton:last-child,
.titlebar .right .titlebutton:last-child:backdrop {
}

.titlebar .left .titlebutton:last-child,
.titlebar .left .titlebutton:last-child:backdrop {
}

.titlebar .left .titlebutton:first-child,
.titlebar .left .titlebutton:first-child:backdrop {
}

.titlebar .titlebutton:backdrop {
	icon-shadow: none;
}

.window-frame,
.window-frame:backdrop {
	border-radius: 8px 8px 0 0;
	border-width: 1px;
	border-style: solid;

	box-shadow: 0 2px 8px 3px alpha (@dark_bg_color, 0.4);

	/* this is used for the resize cursor area */
	margin: 10px;
}

.window-frame.tiled,
.window-frame.tiled:backdrop {
	border-radius: 0;
	background-color: @dark_bg_color;
}
