.sidebar {
	// Setting the position and clearing some
	// margins and paddings.
	margin: 0;
	padding: 0;

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	display: flex;
	flex-direction: column;

	overflow: auto;

	// Not sure this is needed.
	@include breakpoint-deprecated( "<660px" ) {
		-webkit-overflow-scrolling: touch;
	}

	// Prevent elements from shrinking during
	// initial load in Safari. Unsure if still required?
	.sidebar__footer,
	ul,
	li {
		flex-shrink: 0;
	}

	// Reset lists to avoid bullets and margins.
	ul {
		margin: 0;
		padding: 0;
	}

	li {
		list-style: none;
	}

	.count {
		margin-left: 8px;
		background-color: var(--color-sidebar-menu-hover-background);
		border-color: var(--color-sidebar-menu-hover-background);
		color: var(--color-sidebar-menu-hover-text);
	}
}

// This button is hidden until focused. It allows screen-readers
// and other assistive technology to skip the sidebar.
.sidebar__skip-navigation {
	position: absolute;
	left: -10000px;
	flex-shrink: 0;

	&:focus {
		position: relative;
		left: auto;
	}
}

// Sidebar Headings, used for both static headings
// like in Reader, and for the expandable menus.
.sidebar__heading {
	color: var(--color-sidebar-text-alternative);
	font-size: $font-body;
	font-weight: 600;
	padding: 16px 8px 6px 16px;
	margin: 0;
	outline: 0;
}

// Sidebar menu icons for main sections
.sidebar__menu-icon {
	fill: var(--color-sidebar-gridicon-fill);
	color: var(--color-sidebar-gridicon-fill);
	margin-right: 11px;
	flex-shrink: 0;
}

// Checklist progress
.sidebar__menu .myhome .sidebar__menu-link-text {
	max-width: calc(100% - 80px);
	white-space: normal;
	padding-right: 8px;
}

.sidebar__checklist-progress {
	width: 80px;

	.sidebar__checklist-progress-text {
		font-size: $font-body-extra-small;
		margin: 0;
		white-space: normal;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.progress-bar {
		background-color: color-mix(in srgb, var(--color-sidebar-text) 40%, transparent);
		height: 6px;

		.selected & {
			background-color: color-mix(in srgb, var(--color-sidebar-menu-selected-text) 40%, transparent);
		}

		.progress-bar__progress {
			background-color: var(--color-sidebar-text);

			.selected & {
				background-color: var(--color-sidebar-menu-selected-text);
			}
		}
	}
}

// Menu links: The actual anchor tags that contain links to
// various sections of Calypso.
.sidebar__menu-link {
	font-size: $font-body;
	line-height: 1.2;
	position: relative;
	padding: 10px 16px 10px 20px;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
	text-decoration: none;

	&,
	&:visited {
		color: var(--color-sidebar-text);
	}

	// I think this is some voodoo to change the color
	// of a link when tapped on iOS.
	-webkit-tap-highlight-color: color-mix(in srgb, var(--color-neutral-700) 20%, transparent);

	&:hover {
		background-color: var(--color-sidebar-menu-hover-background);
		color: var(--color-sidebar-menu-hover-text);

		.sidebar__menu-icon {
			fill: var(--color-sidebar-menu-hover-text);
		}

		.count {
			border-color: var(--color-sidebar-menu-hover-text);
		}
	}

	&:focus {
		outline: none;
	}

	.badge {
		margin: -7px 0 -8px;
	}

	.sidebar__menu-link-badge {
		margin-left: 8px;
		color: var(--color-warning-light);
		padding: 1px 6px;
		font-size: $font-body-extra-small;
	}

	.selected &,
	.selected &:hover {
		color: var(--color-sidebar-menu-selected-text);
		background-color: var(--color-sidebar-menu-selected-background);

		.stats-sparkline {
			--color-stats-sparkline: var(--color-sidebar-menu-selected-text);
		}

		.sidebar__menu-icon {
			fill: var(--color-sidebar-menu-selected-text);
		}

		.count {
			background-color: transparent;
			border-color: var(--color-sidebar-menu-selected-text);
			color: var(--color-sidebar-menu-selected-text);
		}
	}

	// Some links are marked as "external" and show
	// an icon to visually indicate they will open
	// a new window/tab.
	.gridicons-external,
	&.external-link .gridicons-external {
		height: 16px;
		width: 16px;
		position: absolute;
		right: 21px;
		top: auto;
	}
}

.sidebar__menu.is-togglable .sidebar__menu-link {
	line-height: 1.5;
	padding: 7px 16px 7px 20px;
	padding-left: 55px;
}

.sidebar__menu-link-text {
	flex: auto;
}

.sidebar__menu-link-secondary-text {
	margin-right: 8px;
	align-self: center;
	font-weight: 600;
	font-size: $font-body-extra-small;
	position: absolute;
	right: 0;
	z-index: 1;
	color: var(--color-sidebar-text-alternative);
	padding: 4px 8px;

	.selected &,
	.sidebar__menu-link:hover & {
		color: inherit;
	}
}

// Expandables: Some sidebar menus act like accordions where
// you can hide and show the contained list.
.sidebar__menu.is-togglable {
	.sidebar__heading {
		display: flex;
		padding: 10px 16px 10px 20px;
		font-weight: 600;
		cursor: pointer;

		&:hover {
			background-color: var(--color-sidebar-menu-hover-background);
			color: var(--color-sidebar-menu-hover-text);

			.sidebar__menu-icon,
			.sidebar__expandable-arrow {
				fill: var(--color-sidebar-menu-hover-text);
			}

			.count {
				background-color: transparent;
				border-color: var(--color-sidebar-submenu-selected-text);
				color: var(--color-sidebar-submenu-selected-text);
			}
		}
	}

	.sidebar__expandable-title {
		flex: 1 1 0;
	}

	.sidebar__expandable-arrow {
		transition: transform 0.1s linear;
		fill: var(--color-sidebar-gridicon-fill);
	}

	&.is-toggle-open {
		.sidebar__expandable-arrow {
			transform: rotate(180deg);
		}
		.count {
			background-color: transparent;
			border-color: var(--color-sidebar-submenu-selected-text);
			color: var(--color-sidebar-submenu-selected-text);
		}
	}

	.sidebar__expandable-button.components-button:focus {
		outline: none;
		box-shadow: none;

		.accessible-focus & {
			box-shadow: inset 0 0 0 2px var(--color-primary-light);
		}
	}
}

// Sometimes we show info at the bottom of the sidebar. For
// example on My Site(s), for users with a single site, we
// show a button to add a new site.
.sidebar__wp-admin,
.sidebar__footer {
	margin-top: 16px;
}

.sidebar__menu-wrapper {
	border-top: 1px solid var(--color-sidebar-border);
}

.sidebar__menu-link-badge {
	display: inline-block;
	padding: 1px 6px;
	border: solid 1px var(--color-warning);
	border-radius: 12px; /* stylelint-disable-line scales/radii */
	font-size: $font-body-extra-small;
	line-height: 14px;
	text-align: center;
	color: var(--color-warning-light);
	margin-left: 8px;
}
