Шаблон:JobPageHeader/styles.css

.jobpageheader {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.25rem;
	margin: 0.5rem 0;
	background-color: var(--jobheader-transparent);
	border: var(--border-classic);
	border-color: var(--jobheader-secondary);
	border-radius: var(--border-radius-medium);
	box-shadow: 0 0 0.5rem -0.1rem var(--jobheader-secondary);
}

.jobpageheader-title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	height: 1.75rem;
	line-height: 1.3em;
	padding: 0 0.5rem;
	background-color: var(--jobheader-primary);
	color: var(--color-white);
	border-radius: var(--border-radius-small);
}

.jobpageheader-content {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	line-height: 1.3em;
}

.jobpageheader-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.jobpageheader-info {
	flex: 1;
	overflow: hidden;
	line-clamp: 5;
	height: 6.5em; /* ~5lh */
	transition-duration: var(--transition-time);
	transition-property: height;
}

.jobpageheader-info:hover {
	height: auto;
	line-clamp: none;
}

.jobpageheader-more,
.jobpageheader-tabs {
	transition-delay: var(--transition-delay);
	transition-duration: var(--transition-time);
}

.jobpageheader-more {
	cursor: pointer;
	user-select: none;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	height: 1.75em;
	background-color: var(--jobheader-transparent);
	border: var(--border-classic);
	border-color: var(--jobheader-secondary);
	border-radius: var(--border-radius-small);
	transition-property: background-color, color, height;
}

.jobpageheader-more:hover {
	background-color: var(--jobheader-secondary);
	color: var(--color-white);
	transition-delay: 0s;
}

.jobpageheader-more:focus {
	height: 0;
}

.jobpageheader-more:focus ~ .jobpageheader-tabs {
	height: auto;
}

.jobpageheader-tabs {
	height: 0;
	transition-property: height;
}