@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.bloganuary-header {
	background-color: var(--color-sidebar-background);
	border-radius: 2px;
	color: var(--color-sidebar-text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px 32px;
	vertical-align: middle;
	margin-bottom: 20px;

	.blogging-bloganuary-icon {
		vertical-align: middle;
		padding-right: 12px;
		display: inline-block;

		> svg {
			width: 36px;
			height: 36px;
			> path {
				fill: var(--color-sidebar-text);
			}
		}
	}

	.bloganuary-header__title {
		font-family: Recoleta, "Noto Serif", Georgia, "Times New Roman", Times, serif;
		vertical-align: middle;
		font-size: $font-title-medium;

		@include break-small {
			font-size: $font-title-large;
		}
	}

	.bloganuary-header__button {
		vertical-align: middle;
		font-size: 0.875rem;
		margin-right: 10px;
		background-color: var(--color-surface);
		display: inline-flex;
		padding: 8px 14px;
		border: 1px solid var(--color-neutral-10);
	}

	.bloganuary-header__link {
		color: var(--color-sidebar-text);
		font-size: 0.875rem;
		margin-left: 12px;
		vertical-align: middle;
	}
}
