@charset "UTF-8";

/***********
 * Sidebar *
 ***********/

@mixin selected-item-highlight {
	@if $new-highlight {
		background-color: gtk("@theme_selected_bg_color");
		color: gtk("@theme_button_foreground_active");
		border-right: 3px
			solid
			gtk("@theme_button_decoration_focus");
		border-top: 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: 0px;
	}
}
@mixin selected-item-highlight-rtl {
	@if $new-highlight {
		background-color: gtk("@theme_selected_bg_color");
		color: gtk("@theme_button_foreground_active");
		border-left: 3px
			solid
			gtk("@theme_button_decoration_focus");
		border-top: 0;
		border-bottom: 0;
		border-right: 0;
		border-radius: 0px;
	}
}

.sidebar {
	border-radius: 0px;
	border-style: none;
	background-color: gtk("@theme_base_color");

	&:selected {
		@extend %selected_items;
	}

	&:not(separator) {
		&:dir(ltr),
		&.left,
		&.left:dir(rtl) {
			border-right: 1px
				solid
				gtk("@borders");
			border-left: none;
		}

		&:dir(rtl),
		&.right {
			border-left: 1px
				solid
				gtk("@borders");
			border-right: none;
		}
	}

	.sidebar-header > separator {
		background-color: $ligh_border_color;
	}

	row {
		&:hover {
		}

		&.activatable {
			border: 0;
			&:dir(ltr) {
				border-right: 3px solid transparent;
			}
			&:dir(rtl) {
				border-left: 3px solid transparent;
			}

			&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411

      &:hover:dir(ltr) {
				@include selected-item-highlight();
			}
			&:hover:dir(rtl) {
				@include selected-item-highlight-rtl();
			}

			&:active:dir(ltr) {
				@include selected-item-highlight();
			}
			&:active:dir(rtl) {
				@include selected-item-highlight-rtl();
			}

			&:selected {
				&:dir(ltr) {
					@include selected-item-highlight();
				}
				&:dir(rtl) {
					@include selected-item-highlight-rtl();
				}

				&:active {
					&:dir(ltr) {
						@include selected-item-highlight();
					}
					&:dir(rtl) {
						@include selected-item-highlight-rtl();
					}
				}

				&.has-open-popup,
				&:hover {
					&:dir(ltr) {
						@include selected-item-highlight();
					}
					&:dir(rtl) {
						@include selected-item-highlight-rtl();
					}
				}

				&:backdrop {
					background-color: gtk(
						"@theme_unfocused_selected_bg_color_alt"
					);
				}
			}
		}

		&:selected {
			@extend %selected_items;
		}
	}
	paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
}
separator.sidebar {
	background-color: gtk("@borders");
}

// Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color
placessidebar {
	> viewport.frame {
		border-style: none;
	}

	row {
		// Needs overriding of the GtkListBoxRow padding
		min-height: 36px;
		padding: 0px;

		// Using margins/padding directly in the SidebarRow
		// will make the animation of the new bookmark row jump
		> revealer {
			padding: 0 14px;
		}

		&:selected {
			color: gtk("@theme_selected_fg_color");
		}

		&:disabled {
			color: gtk("@insensitive_fg_color");
		}

		&:backdrop {
			color: gtk("@theme_unfocused_fg_color");

			&:selected {
				color: gtk(
					"@theme_unfocused_selected_bg_color_alt"
				);
			}

			&:disabled {
				color: gtk("@insensitive_unfocused_fg_color");
			}
		}

		image.sidebar-icon {
			&:dir(ltr) {
				padding-right: 8px;
			}
			&:dir(rtl) {
				padding-left: 8px;
			}
		}

		label.sidebar-label {
			&:dir(ltr) {
				padding-right: 2px;
			}
			&:dir(rtl) {
				padding-left: 2px;
			}
		}

		@at-root button.sidebar-button {
			@include neobutton(toolbutton);

			min-height: 26px;
			min-width: 26px;
			margin-top: 3px;
			margin-bottom: 3px;
			padding: 0;
		}

		// in the sidebar case it makes no sense to click the selected row
		&:selected:active {
			box-shadow: none;
		}

		&.sidebar-placeholder-row {
			padding: 0 8px;
			min-height: 2px;
			background-image: none;
			background-clip: content-box;
		}

		&.sidebar-new-bookmark-row {
			color: gtk("@theme_selected_bg_color");
		}

		// &:drop(active):not(:disabled) {
		//   color: $drop_target_color;
		//   box-shadow: inset 0 1px $drop_target_color,
		//               inset 0 -1px $drop_target_color;
		//
		//   &:selected {
		//     color: $selected_fg_color;
		//     background-color: $drop_target_color;
		//   }
		// }
	}
}

placesview {
	.server-list-button > image {
		-gtk-icon-transform: rotate(0turn);
	}

	.server-list-button:checked > image {
		-gtk-icon-transform: rotate(-0.5turn);
	}

	row.activatable:hover {
		background-color: transparent;
	}

	// this selects the "connect to server" label
	> actionbar > revealer > box > label {
		padding-left: 8px;
		padding-right: 8px;
	}
}

stacksidebar {
	&.sidebar {
		row {
			padding: 10px 4px;
			> label {
				padding-left: 6px;
				padding-right: 6px;
			}
			&.needs-attention > .label {
				@extend %needs_attention;
				background-size: 6px 6px, 0 0;
			}
		}
	}
}
