/* Import blender.org's style. */
@import 'style.css?v=2.0.0-alpha.30.1';

/* TODO: check explicit breakpoints px values to match web-assets v2 */
:root {
	--color-label-legacy: #999;
	--color-label-stable: var(--color-success);
	--color-label-alpha: var(--color-danger);
	--color-label-beta: var(--color-warning);
	--color-label-candidate: var(--color-accent);

	--header-bg-color: #000;

	--fs-subtitle: var(--fs-lg);
	--color-bg-alt-hover: hsl(213, 10%, 23%);

	--fs-table: 1.4rem;
}

.nav-global .nav-global-container {
	max-width: 117.0rem;
}

.navbar-secondary {
	background-color: hsl(213, 10%, 10%);
}

@media only screen and (max-width: 665px) {
	.navbar-secondary {
		display: flex;
		flex-direction: column;
		top: unset;
	}

	.navbar-nav {
		width: 100%;
		flex-wrap: wrap;
	}

	.navbar-nav li {
		flex: 1;
		min-width: 33%;
		white-space: nowrap;
	}

	.navbar-nav li a {
		overflow: hidden;
		text-overflow: ellipsis;
		justify-content: center;
		width: 100%;
	}

	.platforms-list-header {
		flex-direction: column;
	}
	.platform-title {
		flex: 1;
		width: 100%;
	}
	.platform-filter {
		margin-block: var(--spacer-2);
	}
}

.hero {
	--hero-max-height: none;

	align-items: start;
	background-color: transparent;
	height: auto;
	z-index: 1;
}

.hero .hero-bg {
	background-size: cover;
	margin-left: auto;
	margin-right: auto;
	max-width: 144.0rem;
	z-index: -3;
}

.hero .hero-bg:after,
.hero .hero-bg:before {
	background-image: linear-gradient(90deg, var(--header-bg-color), transparent);
	content: '';
	height: 100%;
	position: absolute;
	top: 0;
	width: 30.0rem;
	z-index: -2;
}

.hero .hero-bg:after {
	background-image: linear-gradient(-90deg, var(--header-bg-color), transparent);
	right: 0;
}

.hero-helper {
	background-color: var(--header-bg-color);
}

/* Text in the header. */
.hero-content {
	align-items: center;
	color: white;
	display: flex;
	flex-direction: column;
	font-size: var(--fs-lg);
	padding-bottom: var(--spacer-5);
	padding-top: var(--spacer-5);
	text-align: center;
	width: 100%;
}

/* Main title in the header. */
.hero h1 {
	font-size: var(--fs-h1);
	line-height: var(--fs-h1);
}

.hero .hero-overlay {
  background-color: rgba(0, 0, 0, .4)
}

/* Gradient from the top of the header. */
.hero-overlay-bottom {
	background-image: linear-gradient(-1deg, var(--header-bg-color) 20%, transparent 51%);
	bottom: 0;
	height: 30.0rem;
	left: 0;
	position: absolute;
	right: 0;
	width: 100%;
	z-index: -1;
}

.hero-subtitle {
	font-size: var(--fs-base);
	margin-bottom: var(--spacer);
}

/* TODO: Cleanup and refactor styles devfund after donation-box web-assets v2 update */
.devfund {
	background-color: var(--header-bg-color);
}

.devfund a {
	text-decoration: underline;
}

.devfund .btn:hover {
	color: black;
}


.devfund .dfdb .btn-link:hover {
	color: var(--color-accent);
}

.devfund .dfdb .btn-link:active,
.devfund .dfdb .btn-link:focus {
	color: white;
}

.devfund .dfdb .btn-row-tabbed {
	background-color: hsla(0, 0%, 100%, .1); /* --bs-body-bg */
}

.devfund h2 {
	font-size: var(--fs-xl);
	font-variation-settings: "wght" 800;
}

.devfund p {
	font-size: var(--fs-h4);
}

/* Override donation box styling. */
#js-donation-box .btn-row-tabbed {
	--btn-color-bg: hsla(0, 0%, 100%, .1);
}

#js-donation-box .btn {
	--btn-color: white;
}

#js-donation-box .form-control {
	--bs-body-bg: hsla(0, 0%, 100%, .1);
	color: white;
}

/* Header of the list of platforms (windows/darwin/linux). */
.platforms-list-header {
	align-items: center;
	background-color: hsl(213, 10%, 10%);
	border-top-left-radius: var(--border-radius-lg);
	border-top-right-radius: var(--border-radius-lg);
	color: #787882;
	display: flex;
	font-size: var(--fs-table);
	/* justify-content: space-around; */
	user-select: none;
}

.platforms-list-header,
.builds-list-container {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

.builds-list-empty {
	color: var(--text-color-secondary);
	padding: var(--spacer);
	text-align: center;
	list-style: none;
}

.platform-title {
	cursor: pointer;
	display: inline-block;
	padding: var(--spacer-2) var(--spacer-5);
	transition: color var(--transition-speed) ease-in-out, border-color var(--transition-speed) ease-in-out;
	white-space: nowrap;
}

.platform-title:first-child {
	border-top-left-radius: var(--border-radius-lg);
}

.platform-title.active,
.platform-title:hover {
	background-color: hsl(213, 10%, 14%);
	color: white;
}

.platform-title.active {
	background-color: hsl(213, 10%, 18%);
	font-weight: bold;
}

.platform-filter {
	margin-left: auto;
	margin-right: var(--spacer-2);
}

.platform-filter select {
	background: hsl(213, 10%, 18%);
	border-radius: var(--border-radius);
	border: thin solid var(--border-color);
	box-shadow: none;
	color: white;
	outline: 0;
}

/* Hide everything but certain architecture builds. */
#builds-container.is-arm64-only .build:not(.is-arch-arm64),
#builds-container.is-x64-only .build.is-windows:not(.is-arch-amd64),
#builds-container.is-x64-only .build.is-linux:not(.is-arch-x86_64),
#builds-container.is-x64-only .build.is-darwin:not(.is-arch-x86_64) {
	display: none;
}

/* Container for the list of builds. */
.builds-list {
	background-color: var(--color-bg-alt);
	border-bottom-left-radius: var(--border-radius-lg);
	border-bottom-right-radius: var(--border-radius-lg);
	box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.2), 1px 1px 50px rgba(0, 0, 0, 0.5);
	color: var(--color-text-secondary);
	display: none;
	font-family: var(--font-family-mono);
	font-size: var(--fs-table);
	margin: 0;
	padding: 0;
	position: initial;
	text-align: left;
	transform: initial;
	width: 100%;
}

.builds-list>li {
	border-top: var(--border-width) solid hsl(213, 10%, 14%);
	transition: background-color var(--transition-speed);
}

.builds-list>li:last-child {
	border-bottom-left-radius: var(--border-radius-lg);
	border-bottom-right-radius: var(--border-radius-lg);
}

.builds-list>li:hover {
	background-color: var(--color-bg-alt-hover);
	color: var(--color-text);
}

.builds-list a {
	text-decoration: underline;
}

.builds-list a:hover {
	color: white;
}

.builds-list>li .configuration {
	display: inline-block;
	text-transform: capitalize;
}

/* Make the list for the current OS visible. */
.builds-list-container.active .builds-list {
	display: block !important;
	visibility: visible;
	opacity: 1;
}

.t-header {
	text-shadow: none;
}

.t-header .t-header-cell {
	color: var(--color-text-tertiary);
	padding: var(--spacer-2) var(--spacer-2) var(--spacer-1);
}

.t-row {
	align-items: center;
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	justify-content: flex-end;
	width: 100%;
}

.t-cell,
.t-header-cell {
	display: inline-block;
	padding: var(--spacer-2);
}

.t-row .t-cell:first-child,
.t-row .t-header-cell:first-child {
	padding-left: var(--spacer);
}

.b-version,
a.b-version {
	color: white;
	min-width: 18ch;
	text-decoration: none;
}

.b-variant,
a.b-variant {
	flex: 1;
	text-decoration: none;
}

.b-more-builds-of-type {
	padding-right: var(--spacer-2);
}

.b-date {
	min-width: 16ch;
}

.b-reference {
	min-width: 16ch;
}

.b-ext {
	min-width: 8ch;
}

.b-size {
	min-width: 12ch;
}

.b-arch {
	min-width: 16ch;
}

.b-sha {
	min-width: 6ch;
}

.b-down {
	min-width: 16ch;
	text-align: center;
	padding: 0;
}

.b-down a {
	display: block;
	padding: var(--spacer-2) var(--spacer-4) var(--spacer-2) var(--spacer);
}

.b-down i {
	left: -5px;
	position: relative;
}

.build-platform {
	display: none;
	/* Displayed only when running with JavaScript disabled. */
	text-transform: capitalize;
}

/* Labels for main, release branch, etc. */
.b-variant.legacy {
	border-color: var(--color-label-legacy) !important;
	color: var(--color-label-legacy) !important;
}

.b-variant.stable {
	border-color: var(--color-label-stable) !important;
	color: var(--color-label-stable) !important;
}

.b-variant.candidate {
	border-color: var(--color-label-candidate) !important;
	color: var(--color-label-candidate) !important;
}

.b-variant.alpha {
	border-color: var(--color-label-alpha) !important;
	color: var(--color-label-alpha) !important;
}

.b-variant.beta {
	border-color: var(--color-label-beta) !important;
	color: var(--color-label-beta) !important;
}

.builds-archive {
	font-size: var(--fs-sm);
	padding: var(--spacer) 0 0 0;
	text-align: center;
}

.builds-archive a {
	text-decoration: underline;
}

/* Temporary notice on top of builds list. (used e.g. when builds are not being updated) */
.platform-notice {
	--notice-bg-color: hsla(45deg, 100%, 58%, .26);
	--notice-bg-color-alt: hsla(45deg, 100%, 58%, .2);

	background: repeating-linear-gradient(45deg,
			var(--notice-bg-color),
			var(--notice-bg-color) 25px,
			var(--notice-bg-color-alt) 25px,
			var(--notice-bg-color-alt) 50px) black;
	border-bottom: var(--border-width) solid var(--color-bg-alt-hover);
	display: none;
	font-size: var(--fs-base);
	padding: 1rem .5rem;
	position: relative;
}

.platform-darwin.active .platform-notice {
	display: block;
}

/* Custom styling for content_dashboard.php */

.table.monospace tbody tr {
	font-family: var(--font-family-mono);
}

.table.compact {
	font-size: 0.8em;
}

.table.compact tr td a {
	padding: 0 !important;
}

/* TODO: cleanup remove if web-assets link default text-decoration changes */
.builder-dashboard a {
	text-decoration: underline;
	text-underline-offset: .1em;
}

.builder-dashboard .table.monospace .badge-danger {
	color: hsl(0, 0%, 96%);
	background-color: hsl(0deg 78.49% 61.42%);
	font-weight: bold;
}

.builder-dashboard .table.monospace .badge-success {
	color: var(--color-success-text);
	background-color: hsl(90deg 66.59% 72.93%);
	font-weight: bold;
}

/* End custom styling for content_dashboard.php */