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

.jobpageheader {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.25rem;
	margin: 0.5rem 0;
	line-height: 1.3em;
	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,
.jobpageheader-info,
.jobpageheader-more,
.jobpageheader-preview {
	background-color: var(--jobheader-transparent);
	border: var(--border-classic);
	border-color: var(--jobheader-secondary);
}

.jobpageheader-more,
.jobpageheader-info, 
.jobpageheader-title,
.jobpageheader-preview {
	border-radius: var(--border-radius-small);
}

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

.jobpageheader-content {
	display: flex;
	gap: 0.25rem;
}

.jobpageheader-preview {
	overflow: hidden;
	display: flex;
	text-align: center;
	flex-direction: column;
	width: 7.5rem;
	line-height: 1.1em;
	background-color: transparent;
}

.jobpageheader-preview-title {
    user-select: none;
    font-weight: 500;
    padding: 0.2rem 0.25rem 0.1em;
    background-color: var(--jobheader-primary);
    color: var(--color-white);
    border-bottom: 2px solid var(--jobheader-primary);
}

.jobpageheader-preview-image {
	flex-grow: 1;
	align-content: center;
	padding: 0.25rem 0.5rem;
	background-color: var(--jobheader-transparent);
}

.jobpageheader-info {
	flex: 1;
	overflow: hidden;
	align-content: center;
	padding: 0.2rem 0.5rem;
}

.jobpageheader-info-wrapper {
	overflow: hidden;
	height: 5.25em;
	min-height: 5.25em;
	mask-image: linear-gradient(black 75%, transparent 100%);
	transition-duration: var(--transition-time);
	transition-property: height, mask-image;
}

.jobpageheader-info:hover > .jobpageheader-info-wrapper {
	height: max-content;
	mask-image: linear-gradient(black 100%, transparent 100%);
}

.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;
	margin-bottom: -0.25rem;
	transition-property: margin, height, opacity;
}

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

.jobpageheader-more:focus {
	opacity: 0.66;
	height: 0;
	margin: 0 -0.25rem;
}

.jobpageheader-more:focus ~ .jobpageheader-tabs {
	height: max-content;
	transition-delay: 0s;
}

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