@import "@automattic/typography/styles/variables";
@import "../../assets//stylesheets/shared/mixins/breakpoints";
@import "@wordpress/base-styles/mixins";

// ==========================================================================
// .header-cake
//
// The nav bar used as a tertiary content-level nav that consists of a back
// button and a view title.
// ==========================================================================

.header-cake.card {
	display: flex;
	align-items: center;
	font-size: $font-body-small;
	line-height: 18px;
	padding-top: 11px;
	padding-bottom: 11px;

	&::after {
		display: none;
	}

	@include breakpoint-deprecated( "<660px" ) {
		margin-top: 10px;
	}
}

.card.header-cake--has-screen-options {
	@include breakpoint-deprecated( "<660px" ) {
		margin-top: 35px;
	}
}

.header-cake__back {
	flex: none;
	display: block;
	max-width: 33.333%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	&.is-spacer {
		opacity: 0;
		cursor: default;
		z-index: -1;
	}

	&.is-action {
		.gridicon {
			margin-left: -4px;
			margin-right: 4px;
		}
	}

	html[dir="rtl"] & {
		.gridicons-arrow-left {
			transform: scaleX(-1);
		}
	}
}

.header-cake__title {
	flex: 1 1 auto;
	color: var(--color-neutral-70);
	text-align: center;
	word-break: break-word;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 8px;
}
