@import '~heading.less';
@import '../../resources/fontawesome/fontawesome.less';
@import '../../resources/fontawesome/regular.less';
@import '../../resources/fontawesome/solid.less';

:global(.hs-form) {
	font-family: @pageFont;

	:global(.hs-form-field) {
		label {
			color: @greyMedium;
			font-size: 13px;
			line-height: 13px;
		}

		input {
			border-style: solid;
			border-color: darken(@greyLight, 15%);
			border-width: 0 0 3px;
			background: @greyLight;
			color: @greyDark;
			font-size: 13px;
			line-height: 13px;
			padding: 10px;
			margin: 5px 0 20px;
			width: 100%;
			font-family: @pageFont;
		}

		textarea {
			border-style: solid;
			border-color: darken(@greyLight, 15%);
			border-width: 0 0 3px;
			background: @greyLight;
			color: @greyDark;
			font-size: 13px;
			line-height: 19px;
			height: 76px;
			padding: 10px;
			margin: 5px 0 20px;
			width: 100%;
			font-family: @pageFont;
		}

		:global(.hs-form-required) {
			display: none;
		}
	}

	:global(.hs-error-msgs) {
		list-style-type: none;
		margin: 0 0 20px;
		padding: 0;

		li {
			label {
				color: @negative;
				font-size: 13px;
				line-height: 13px;
				font-family: @pageFont;
			}
		}
	}

	input[type="submit"] {
		border: 0;
		background: @primary;
		color: @white;
		font-size: 13px;
		line-height: 13px;
		font-family: @pageFont;
		font-weight: 500;
		padding: 10px;
		margin: -5px 0 20px;
	}
}

:global(.submitted-message) {
	p {
		padding: 0 0 20px;
		font-size: 13px;
		line-height: 17px;
		font-family: @pageFont;
	}
}

.SidebarSupport {
	padding: 20px;

	:global(.menu.secondary) {
		margin: 0 !important;
		background: @primary;
		border: 0 !important;
		
		> a {
			flex: 1 1 auto;
			padding: 10px 20px !important;
			justify-content: center;
			font-weight: 700 !important;
			color: @white !important;
			margin: 0 !important;
			align-self: center !important;

			&:global(.active) {
				border-bottom: 3px solid @secondary !important;
			}
		}
	}

	:global(.tab) {
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		border: 0 !important;
		background: none !important;
		padding: 0 !important;
	}

	.Back {
		font-size: 13px;
		line-height: 13px;
		margin: 0 -20px 5px;
		padding: 12px 20px;
		text-align: left;
		width: calc(~"100% + 40px");
		cursor: pointer;
		font-weight: 500;
		background: @greyMedium;
		color: @white;

		&:hover,
		&:focus {
			background: @greyMedium;
			color: @white;
		}

		> :global(.arrow.icon) {
			.fa-icon();
			.far();
			opacity: 1;
			font-size: 14px;
			line-height: 16px;
			vertical-align: text-top;
		}
	}

	// Help

	.Help {
		box-shadow: @shadow !important;

		.SupportOptions {
			padding: 0 20px;

			:global(#Support) {
				margin-top: 15px;
			}

			:global(.item) {
				color: @greyDark;
				line-height: 13px;
				font-size: 13px;
				border-top: 1px solid @greyLight !important;
				padding: 12px 20px;
				margin: 0 -20px;

				&:global(:first-child) {
					border-top: 0 !important;
				}

				i {
					.fa-icon();
					.fas();
					display: table-cell;
					color: @greyMedium;
					line-height: 14px;
					font-size: 16px;
					padding: 0;
					min-width: 26px;
					text-align: left;
					vertical-align: middle;
				}

				:global(.content) {
					cursor: pointer;
					padding: 0 0 0 5px;

					span {
						color: @greyMedium;
						display: block;
						margin: 0 0 5px;
						cursor: default;
					}

					a {
						color: @greyDark;
					}
				}
			}
		}
	}

	// Knowledge Base

	.KnowledgeBase {
		box-shadow: @shadow !important;

		.Search {
			font-size: 13px;

			:global(input) {
				border-width: 0 !important;
				padding: 10px 20px;

				&:global(::placeholder) {
					color: @greyMedium;
				}

				&:global(:focus) {
					border-width: 0 !important;
				}
			}

			:global(.button) {
				color: @greyMedium;
				background: @white !important;

				:global(.icon) {
					.fa-icon();
					.fas();
					opacity: 1 !important;
				}
			}
		}

		.Articles {
			font-size: 13px;

			:global(.title) {
				font-size: 13px !important;
				margin: 0 !important;
				font-weight: 500 !important;
				background: @greyMedium !important;
				color: @white !important;
				padding: 10px 20px !important;
				border-top: 1px solid darken(@greyMedium, 5%);

				&:first-child {
					border-top: 0 !important;
				}

				i {
					display: none !important;
				}
			}

			:global(.active) + :global(.title) {
				border-top: 0 !important;
			}

			:global(.content) {
				padding: 0 20px !important;
				color: @greyDark;

				:global(.item) {
					line-height: 19px !important;
					cursor: pointer;
					border-top: 1px solid @greyLight !important;
					padding: 10px 20px !important;
					margin: 0 -20px;

					&:global(:first-child) {
						border-top: 0 !important;
					}
				}
			}
		}

		.Heading {
			font-size: 13px;
			font-weight: 500;
			margin: 0;
			background: @greyMedium;
			color: @white;
			padding: 11px 20px;
		}

		.SearchResults {
			padding: 0 20px !important;
			color: @greyDark;

			.Heading {
				margin: 0 -20px;
			}

			:global(.list) {
				margin: 0 !important;

				:global(.item) {
					line-height: 19px !important;
					cursor: pointer;
					border-top: 1px solid @greyLight !important;
					padding: 10px 20px !important;
					margin: 0 -20px;

					&:first-child {
						border-top: 0 !important;
					}
				}
			}
		}

		.SearchEmpty {
			p {
				color: fadeout(@greyMedium, 25%);
				text-align: center;
				background: @white;
				padding: 15px 20px;
				font-style: italic;
			}
		}

		.Article {
			color: @greyDark;
			padding: 0 20px;
			margin-bottom: 0;

			.Back {
				margin-bottom: 15px;
			}

			.Vote {
				color: @greyMedium;
				margin: 30px 0 0;
				text-align: center;

				p {
					margin-bottom: 10px;
				}

				:global(.buttons) {
					margin: 0 -20px !important;
					width: calc(~"100% + 40px");

					:global(.button) {
						font-size: 13px !important;

						&:global(.positive) {
							background: fadeout(@positive, 90%);
							color: darken(@positive, 10%);
						}

						&:global(.negative) {
							background: fadeout(@negative, 90%);
							color: darken(@negative, 10%);
						}
					}
				}
			}
		}
	}

	// Release Notes

	.Releases {
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		border: 0 !important;
		background: none !important;
		padding: 0 !important;
		box-shadow: @shadow !important;

		.Release {
			color: @greyDark;
			padding: 0 20px 1px;
			margin-bottom: 0;
			box-shadow: @shadow;

			> :global(.dropdown) {
				font-size: 13px !important;
				line-height: 25px !important;
				font-weight: 400 !important;
				background: @greyMedium;
				display: block;
				padding: 5px 20px;
				margin: 0 -20px 15px;

				:global(.text) {
					color: @white;
					vertical-align: middle;
					font-weight: 500;
				}

				input {
					font-size: 13px !important;
					line-height: 25px !important;
					height: 35px;
					min-width: 100px;
					font-family: @pageFont;
					font-weight: 500 !important;
					color: @white;

					&:global(.search:focus) + :global(.text) {
						color: @white !important;
						font-weight: 500 !important;
					}
				}

				i {
					font-size: 11px !important;
					line-height: 25px !important;
					margin: 0 0 0 10px !important;
					vertical-align: top !important;
					color: @white;
				}

				:global(.filtered) + i {
					display: none;
				}

				&:global(.search.active) {
					i {
						display: none;
					}
				}

				:global(.menu) {
					box-shadow: @shadow !important;
					border: 0 !important;
					margin: 0 !important;
					max-height: 300px !important;

					:global(.item),
					:global(.item.active) {
						border-bottom: 1px solid @greyLight;
						color: @greyDark !important;
						padding: 10px !important;
						font-weight: 300 !important;
						border-left: 3px solid transparent;

						&:global(:hover),
						&:global(.selected) {
							background: @white !important;
						}

						&:global(.selected) {
							border-left: 3px solid lighten(@secondary, 30%);
						}

						&:global(.active) {
							background: @white !important;
							border-left: 3px solid @secondary;
						}

						:global(.text) {
							font-size: 13px;
							line-height: 13px;
							font-weight: 400 !important;
							color: @greyDark;
						}
					}

					:global(.message) {
						font-size: 13px !important;
					}
				}
			}
		}
	}
}

.Modal {
	width: auto !important;

	:global(.content) {
		padding: 0 !important;

		.ModalImage {
			opacity: 1;
		}
	}
}