@import '../variables/colors.less';
@import '../variables/typography.less';

// Use these classes to opt-in to header styling.
.o-hero,
.o-h1,
.o-h2,
.o-h3 {
	font-family: @font-stack-headers;
	font-weight: @font-weight-light;
	line-height: @font-line-height-header;

	&.vertical-margin {
		margin-bottom: 10px;
		margin-top: 20px;
	}
}

.o-hero {
	font-size: 38px;
}

.o-h1 {
	font-size: 28px;
}

.o-h2 {
	font-size: 20px;
}

.o-h3 {
	font-size: 16px;
}

.o-h4 {
	font-family: @font-stack-main;
	font-size: @font-size-base;
	font-weight: @font-weight-bold;
	line-height: @font-line-height-base;

	&.vertical-margin {
		margin-bottom: 10px;
		margin-top: 10px;
	}
}

// The page header is designed to wrap a page icon/title and optional
// right-aligned actions or additional content below the title.
@header-margin: 30px;

.o-page-header {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	margin-bottom: @header-margin;
	padding-top: @header-margin;
}

.o-page-title,
h1.o-page-title {
	font-size: 28px;
	font-weight: @font-weight-light;
	margin: 0;

	&:not(:last-child) {
		margin-bottom: 15px;
	}
}

.o-page-title__subtle {
	color: @color-gray-x-light;

	&.is-react {
		margin-right: 12px;
	}
}

.o-page-title__icon {
	color: @color-gray-x-light;
	margin-right: 2px;
}