@import '@automattic/typography/styles/variables';
@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';

body.is-section-gutenberg-editor .domain-upsell-callout {
	height: 60px;
}
body.is-section-posts .domain-upsell-callout {
	height: 46px;
}

.domain-upsell-callout {
	font-size: $font-body-extra-small;
	position: absolute;
	z-index: 99998;
	display: flex;
	align-items: center;
	left: 50%;
	transform: translateX( -50% );
	height: 46px;

	@media ( max-width: $break-xlarge ) {
		display: none;
	}

	&__content {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var( --studio-gray-60 );
	}

	&__content-text {
		display: flex;
		align-items: center;
		border-radius: 24px;
		padding: 6px 20px;
		column-gap: 10px;
		background: #f6f7f7;
		@media ( max-width: $break-wide ) {
			padding: 6px 10px;
		}
	}

	&__button-text-desktop {
		display: block;
		@media ( max-width: $break-wide ) {
			display: none;
		}
	}
	&__button-text-mobile {
		display: none;
		@media ( max-width: $break-wide ) {
			display: block;
		}
	}
	&__icon {
		fill: var( --studio-gray-60 );
		@media ( max-width: $break-wide ) {
			display: none;
		}
	}
	&__button {
		font-size: $font-body-extra-small;
		white-space: nowrap;
		text-decoration: underline;
		color: #3858e9;
	}

	&__button:hover,
	&__dismiss-icon:hover {
		cursor: pointer;
	}
}
