// Topbar

.topbar .topbar-list {
	@media (min-width: $screen-md-min) {
		margin-right: 20px;

		&:last-child {
			margin-right: 0;
		}

		& + .topbar-list {
			margin-left: 20px;
		}
	}
}

.topbar .topbar-list .topbar-item:first-child {
	margin-left: 0;
}

.topbar, .guide:not(.content) .topbar, .tutorial .sidebar-offset .topbar {
	background-color: $primary;
}

.topbar .topbar-logo .topbar-logo-image {
	height: 28px;
	margin: 4px 0;
}

.topbar-link {
	color: rgba(white, 0.6);
}

.topbar-link:hover,
.topbar-link:focus {
	color: white;
}

.topbar-icon {
	@include anim(background-color);

	align-items: center;
	background-color: $accent;
	border-radius: 50%;
	display: flex;
	height: 32px;
	justify-content: center;
	margin: auto;
	width: 32px;

	&, &:hover, &:focus {
		color: white;
	}

	&:hover, &:focus {
		background-color: rgba($accent, 0.8);
	}

	.icon-16-github {
		font-size: 34px;
	}

	.icon-16-hash {
		font-size: 24px;
	}
}

// Header

.header {
	background-color: $primary;
	background-image: url(../images/background_header_logo@2x.png);
	background-position: right -600px top 100px;
	background-repeat: no-repeat;
	background-size: 1145px 916px;

	.header-title {
		color: #FFF;
		margin-bottom: 35px;
	}

	.header-subtitle {
		color: #FFF;
	}
}

.header, .about {
	.btn-default {
		background: rgba(255, 255, 255, 0.05);

		&, &:hover, &:focus, &:hover:focus {
			color: #FFF;
			border: 1px solid rgba(255, 255, 255, 0.6)
		}

		&:hover, &:focus, &:hover:focus {
			background-color: transparent;
		}
	}
}

@for $i from 1 through 6 {
	.docs .guide-content h#{$i} a:not([class]) {
		border: 0 none;
		display: block; // HASH
		line-height: 1em;
		margin-right: 0.5em;
		position: relative; // HASH
		transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;

		&::before { // HASH
			content: "#";
			font-size: 0.7em;
			left: 0.2em;
			opacity: 0;
			position: absolute;
			top: 0;
			transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
			vertical-align: super;
		}

		&:hover, &:focus { // HASH
			transform: translateX(0.5em);

			&::before {
				opacity: 0.6;
				transform: translateX(-1em);
			}
		}
	}
}

.tutorial .container img {
	max-width: 100%;
}

.tutorial .container .card .nav.nav-tabs.nav-code-tabs {
	margin: 0;
	padding: 0 24px;

	li:before {
		display: none;
	}
}

.tutorial-back-link {
	align-items: center;
	color: rgba(35, 50, 64, 0.8);
	display: flex;
	font-size: .8125rem;
	font-weight: 600;
	padding: 12px 24px;
	text-align: center;
	transition: color 300ms;

	.icon-12-arrow-left-short {
		font-weight: 600;
		display: block;
		margin-right: calc(.5rem * 1.5);
		width: calc(1.5rem * 1.5);
		height: calc(1.5rem * 1.5);
		border-radius: 50%;
		box-shadow: 0 2px 8px rgba(35, 50, 64, 0.12);
		text-align: center;
		line-height: calc(1.5rem * 1.5);
		background: white;
		font-size: .8125rem;
		flex-shrink: 0;
		position: relative;
		z-index: 1;
	}

	&:hover, &:focus {
		color: $accent;
	}
}

.tutorial .sidebar .sidebar-list {
	padding-top: 0;
}

@media (min-width: 960px) {
	.tutorial .sidebar {
		width: 284px;
	}

	.tutorial .sidebar-offset {
		margin-left: 284px;
		width: calc(100% - 284px);
	}
}

.topbar-list-icons .topbar-item {
	margin: 0 20px;
}

.topbar-list-icons .topbar-item:last-child {
	margin: 0;
}
