@critical {
	.sidebar {
		display: flex;
		height: $sidebar-width;
		background-color: #fff;
		border: 0 solid $border-color;
		border-bottom-width: 1px;

		@include medium() {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			z-index: 1000;
			height: $sidebar-width-medium;
		}

		@include desktop() {
			right: auto;
			bottom: 0;
			flex-direction: column;
			width: $sidebar-width-medium;
			height: auto;
			border-right-width: 1px;
			border-bottom-width: 0;
		}

		body.admin-bar & {
			top: $admin-bar-height;

			@include desktop() {
				top: $admin-bar-height-medium;
			}
		}
	}
}

.sidebar__logo-link,
.sidebar__action {
	width: $sidebar-width;
	height: $sidebar-width;

	@include medium() {
		width: $sidebar-width-medium;
		height: $sidebar-width-medium;
	}
}

.sidebar__logo-link {
	display: block;
	margin: 0;
	flex-shrink: 0;
}

.sidebar__site-name {
	@extend %screen-reader-text;
}

.sidebar__logo {
	margin: 0;
	padding: 1rem;
}

.sidebar__logo-image {
	display: block;
}

.sidebar__action-sets {
	display: flex;
	justify-content: space-between;
	height: 100%;
	width: 100%;

	@include desktop() {
		flex-direction: column;
	}
}

.sidebar__actions {
	&:not( .is-end ) .sidebar__action {
		border-left-width: 0;
		border-top-width: 0;
	}
}

.sidebar__action {
	display: inline-flex;
	margin-top: -1px;
	padding-top: 1px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 1px solid $border-color;
	color: $font-color-body;
	border-top-width: 0;
	border-bottom-width: 0;

	@include desktop() {
		display: flex;
		height: $sidebar-width-medium;
		margin-top: 0;
		padding-top: 0;
		margin-left: -1px;
		padding-left: 1px;
		border-top-width: 1px;
		border-bottom-width: 1px;
		border-left-width: 0;
		border-right-width: 0;
	}

	&:hover {
		background-color: $mono-hover-color;
	}

	&.is-selected {
		box-shadow: inset 0 0 1rem 0 rgba( 0, 0, 0, 0.16 );
	}

	.sidebar__actions.is-end &:last-child {
		border-right-width: 0;
		border-bottom-width: 0;
	}
}

.sidebar__action-text {
	@extend %bold;
	margin-top: 0.2rem;
	text-transform: uppercase;
	font-size: 0.7rem;
}
