@automattic/newspack-blocks 1.0.0-hotfix-cap-count-user-posts-dedup.1

package/src/blocks/donate/styles/style-variations.scss

@@ -0,0 +1,792 @@
+@use "newspack-colors" as np-colors;
+@use "../../../shared/sass/mixins";
+@use "../../../shared/sass/variables";
+
+/* Default Style */
+
+.wpbnbd.is-style-default {
+	.wpbnbd {
+		&__button {
+			padding: 0.38rem 0.76rem;
+			&:focus,
+			&:hover {
+				background: np-colors.$neutral-050;
+			}
+		}
+		&__tiers {
+			&__selection {
+				> button {
+					flex: 1;
+				}
+			}
+		}
+	}
+
+	&.wpbnbd--frequency-based {
+		.wpbnbd__button {
+			border-width: 0 0 1px;
+			&--active {
+				background: np-colors.$neutral-000;
+				border-bottom: 0;
+			}
+		}
+	}
+
+	&.wpbnbd-frequencies {
+		&--2 .tab-container .freq-label:nth-of-type(2) {
+			border-left-width: 1px;
+		}
+		&--3 .tab-container .freq-label:nth-of-type(2) {
+			border-left-width: 1px;
+			border-right-width: 1px;
+		}
+	}
+}
+
+/* Alternate Style */
+
+.wpbnbd.is-style-alternate {
+	border-color: np-colors.$neutral-050;
+	border-radius: 5px;
+
+	.thanks {
+		margin: 1.12rem;
+	}
+
+	.money-input {
+		max-width: 100%;
+
+		input[type="number"] {
+			max-width: 100%;
+			width: 100%;
+		}
+	}
+
+	&.untiered {
+		.input-container {
+			margin: 1.12rem;
+		}
+	}
+
+	&.tiered {
+		.tiers {
+			.tier-label {
+				background: np-colors.$neutral-050;
+				border-color: np-colors.$neutral-050;
+				margin: 0;
+				text-align: center;
+			}
+		}
+
+		.money-input {
+			bottom: 0;
+			left: 0;
+			right: 0;
+		}
+	}
+
+	.tab-container .freq-label,
+	.wpbnbd__tiers__selection {
+		background: np-colors.$neutral-050;
+		border-color: np-colors.$neutral-050;
+	}
+
+	.wpbnbd__tiers__selection {
+		width: min-content;
+		margin-left: auto;
+		margin-right: auto;
+		padding: 5px;
+		border-radius: 5px;
+		.wpbnbd__button {
+			color: np-colors.$neutral-900;
+			padding: 0 15px;
+		}
+	}
+
+	/* Tiers-based version. */
+	.wpbnbd__tiers .wpbnbd__button {
+		border: 0.19rem solid transparent;
+
+		&--active {
+			border-color: np-colors.$neutral-000;
+		}
+	}
+
+	.wpbnbd__tiers .wpbnbd__button--active,
+	/* Frequency-based version. */
+	.tab-container .freq-label.wpbnbd__button--active::after {
+		background: np-colors.$neutral-000;
+		border-radius: 5px;
+		box-shadow: 0 0 0 1px np-colors.$neutral-300;
+	}
+
+	.tab-container {
+		.freq-label {
+			border-width: 1px;
+			padding: calc(0.57rem + 1px) 0.5rem;
+			position: relative;
+			@include mixins.media( mobile ) {
+				padding: calc(0.57rem + 1px) 0.76rem;
+			}
+
+			&.wpbnbd__button--active {
+				color: np-colors.$neutral-900;
+				&::after {
+					box-sizing: content-box;
+					content: "";
+					display: block;
+					inset: 0.19rem;
+					position: absolute;
+					z-index: -1;
+				}
+				&:hover {
+					background: np-colors.$neutral-050;
+				}
+			}
+		}
+	}
+
+	/* Show/hide the tab content. */
+	.frequencies input[type="radio"]:checked ~ .tiers {
+		display: grid;
+		grid-gap: 0.28rem;
+		grid-template-columns: repeat(2, 1fr);
+		margin: 1.12rem;
+
+		@include mixins.media( mobile ) {
+			grid-template-columns: repeat(4, 1fr);
+			grid-gap: 0.56rem;
+		}
+	}
+
+	&.is-style-default {
+		button {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+			margin: 0 -1px -1px;
+			width: calc(100% + 2px);
+		}
+	}
+
+	@include mixins.media( mobile ) {
+		&.wpbnbd--nyp-disabled .frequencies input[type="radio"]:checked ~ .tiers {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
+}
+
+/* Minimal Style */
+
+.wpbnbd.is-style-minimal {
+	border: none;
+
+	form {
+		text-align: center;
+	}
+
+	.thanks {
+		margin: 1.12rem 0;
+	}
+
+	.money-input {
+		max-width: 100%;
+
+		input[type="number"] {
+			max-width: 100%;
+			width: 100%;
+		}
+	}
+
+	&.untiered {
+		.input-container {
+			margin: 0.56rem 0 1.12rem;
+			text-align: left;
+		}
+	}
+
+	/* Tiers-based version. */
+	.wpbnbd__tiers {
+		&__selection {
+			.wpbnbd__button {
+				position: relative;
+				border: none;
+				padding: 8px;
+				flex-basis: 100%;
+				&::after {
+					position: absolute;
+					content: "";
+					display: block;
+					height: 1px;
+					background: np-colors.$neutral-300;
+					width: 100%;
+					left: 0;
+					bottom: 0;
+				}
+				&--active {
+					&::after {
+						height: 3px;
+						background: np-colors.$neutral-900;
+					}
+				}
+			}
+		}
+
+		&__back-button {
+			margin-bottom: 10px;
+		}
+	}
+
+	&.tiered {
+		.tiers {
+			.tier-label {
+				align-items: center;
+				display: grid;
+				background: transparent;
+				border: none;
+				color: np-colors.$neutral-600;
+				font-family: inherit;
+				font-weight: inherit;
+				grid-gap: 0.25rem;
+				grid-template-columns: auto 1fr;
+				margin: 0;
+				padding: 0;
+				text-align: left;
+
+				&::before {
+					background: np-colors.$neutral-000;
+					border: 1px solid np-colors.$neutral-300;
+					border-radius: 100%;
+					box-shadow: inset 0 0 0 3px np-colors.$neutral-000;
+					content: "";
+					display: block;
+					height: 20px;
+					padding: 3px;
+					width: 20px;
+				}
+
+				&:hover {
+					color: inherit;
+				}
+			}
+
+			input[type="radio"]:checked + .tier-select-label {
+				background: none;
+				color: inherit;
+
+				&::before {
+					background: currentcolor;
+				}
+			}
+		}
+
+		.money-input {
+			bottom: 0;
+			left: 0;
+			right: 0;
+		}
+	}
+
+	.tab-container {
+		.freq-label {
+			background: transparent;
+			border: none;
+			box-shadow: 0 3px 0 np-colors.$neutral-000, 0 4px 0 0 np-colors.$neutral-300;
+			padding: 0.38rem 0;
+			transition: none;
+
+			@include mixins.media( tablet ) {
+				padding-left: 0.76rem;
+				padding-right: 0.76rem;
+			}
+
+			&::before {
+				border-width: 1px;
+				border-color: np-colors.$neutral-300;
+			}
+
+			&.wpbnbd__button--active {
+				box-shadow: 0 4px 0 currentcolor;
+			}
+		}
+	}
+
+	.frequency {
+		input[type="radio"]:checked {
+			~ .tiers {
+				display: flex;
+				flex-wrap: wrap;
+				grid-gap: 1.12rem;
+				justify-content: center;
+				margin: 1.12rem 0;
+
+				@include mixins.media( mobile ) {
+					display: grid;
+					grid-gap: 0.56rem;
+					grid-template-columns: repeat(4, 1fr);
+				}
+			}
+		}
+	}
+	button[type="submit"] {
+		margin: 0 auto;
+		min-width: 50%;
+	}
+
+	@include mixins.media( mobile ) {
+		&.wpbnbd--nyp-disabled .frequency input[type="radio"]:checked ~ .tiers {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
+}
+
+/* Modern Style */
+
+.wpbnbd.is-style-modern {
+	background: none;
+	border: none;
+	font-family: var(--newspack-ui-font-family, system-ui, sans-serif);
+	font-size: var(--newspack-ui-font-size-s, 16px);
+	line-height: var(--newspack-ui-line-height-s, 1.5);
+	position: relative;
+
+	.thanks {
+		background: var(--newspack-ui-color-neutral-0, np-colors.$neutral-000);
+		border: 1px solid var(--newspack-ui-color-neutral-30, np-colors.$neutral-300);
+		border-bottom: 0;
+		border-top: 0;
+		color: var(--newspack-ui-color-neutral-60, np-colors.$neutral-600);
+		font-size: var(--newspack-ui-font-size-s, 16px);
+		line-height: var(--newspack-ui-line-height-s, 1.5);
+		margin: 0;
+		padding: 0 var(--newspack-ui-spacer-5, 24px) var(--newspack-ui-spacer-5, 24px);
+	}
+
+	.money-input {
+		border-color: var(--newspack-ui-color-input-border, np-colors.$neutral-400);
+		color: var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+		font-size: var(--newspack-ui-font-size-s, 16px);
+		left: var(--newspack-ui-spacer-5, 24px);
+		line-height: var(--newspack-ui-line-height-s, 1.5);
+		max-width: 100%;
+		overflow: hidden;
+		right: var(--newspack-ui-spacer-5, 24px);
+		transition: border-color 125ms ease-in-out, outline 125ms ease-in-out;
+
+		&:focus-within {
+			border-color: var(--newspack-ui-color-input-border-focus, np-colors.$neutral-900);
+			outline: 2px solid var(--newspack-ui-color-input-border-focus, np-colors.$neutral-900);
+			outline-offset: -1px;
+		}
+
+		.currency {
+			background: var(--newspack-ui-color-neutral-5, np-colors.$neutral-050);
+			font-size: var(--newspack-ui-font-size-xs, 14px);
+			font-weight: 600;
+			line-height: var(--newspack-ui-spacer-9, 48px);
+			margin: 0;
+			padding: 0;
+			text-align: center;
+			width: var(--newspack-ui-spacer-9, 48px);
+		}
+
+		input[type="number"] {
+			font-family: inherit;
+			font-size: inherit;
+			font-weight: 400;
+			line-height: inherit;
+			max-width: 100%;
+			padding: calc(var(--newspack-ui-spacer-2, 12px) - 1px);
+			width: 100%;
+		}
+	}
+
+	.tab-container .freq-label,
+	.wpbnbd__tiers__selection {
+		background: var(--newspack-ui-color-neutral-10, np-colors.$neutral-100);
+		border: none;
+	}
+
+	.wpbnbd__tiers .wpbnbd__button--active,
+	/* Frequency-based version. */
+	.tab-container .freq-label.wpbnbd__button--active::after {
+		background: var(--newspack-ui-color-neutral-0, np-colors.$neutral-000);
+		border: 1px solid var(--newspack-ui-color-neutral-30, np-colors.$neutral-300);
+		border-radius: var(--newspack-ui-border-radius-s, 4px);
+	}
+
+
+	.wpbnbd__button {
+		font-family: inherit;
+		font-size: inherit;
+		line-height: inherit;
+		text-transform: none;
+	}
+
+	.frequencies {
+		font-family: inherit;
+		font-size: var(--newspack-ui-font-size-s, 16px);
+		line-height: var(--newspack-ui-line-height-s, 1.5);
+
+		input[type="radio"]:checked ~ .tiers {
+			background: var(--newspack-ui-color-neutral-0, np-colors.$neutral-000);
+			border: 1px solid var(--newspack-ui-color-neutral-30, np-colors.$neutral-300);
+			border-bottom: 0;
+			border-radius: var(--newspack-ui-border-radius-l, 8px) var(--newspack-ui-border-radius-l, 8px) 0 0;
+			display: grid;
+			gap: calc(var(--newspack-ui-spacer-base, 8px) / 2);
+			grid-template-columns: repeat(2, 1fr);
+			margin: var(--newspack-ui-spacer-2, 12px) 0 0;
+			padding: var(--newspack-ui-spacer-5, 24px);
+		}
+	}
+
+	&.wpbnbd--nyp-disabled .frequencies input[type="radio"]:checked ~ .tiers {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	/* Layout: Frequency */
+	&.wpbnbd--frequency-based {
+		form {
+			&::after {
+				background: var(--newspack-ui-color-neutral-0, np-colors.$neutral-000);
+				border: 1px solid var(--newspack-ui-color-neutral-30, np-colors.$neutral-300);
+				border-radius: 0 0 var(--newspack-ui-border-radius-l, 8px) var(--newspack-ui-border-radius-l, 8px);
+				border-top: 0;
+				bottom: 0;
+				box-sizing: border-box;
+				content: "";
+				display: block;
+				font-size: var(--newspack-ui-font-size-s, 16px);
+				height: calc(var(--newspack-ui-spacer-5, 24px) + var(--newspack-ui-spacer-2, 12px) + 1.5em + var(--newspack-ui-spacer-2, 12px) + var(--newspack-ui-spacer-5, 24px));
+				position: absolute;
+				width: 100%;
+				z-index: 0;
+			}
+		}
+
+		.tab-container {
+			background: var(--newspack-ui-color-neutral-10, np-colors.$neutral-100);
+			border-radius: var(--newspack-ui-border-radius-m, 6px);
+			gap: calc(var(--newspack-ui-spacer-base, 8px) / 2);
+			margin-left: auto;
+			margin-right: auto;
+			padding: calc(var(--newspack-ui-spacer-base, 8px) / 2);
+			width: min-content;
+
+			&:has(:nth-child(3)) {
+				max-width: 300px;
+				width: 100%;
+
+				.freq-label {
+					padding-left: calc(var(--newspack-ui-spacer-2, 12px) - 1px);
+					padding-right: calc(var(--newspack-ui-spacer-2, 12px) - 1px);
+					width: 100%;
+				}
+			}
+
+			.freq-label {
+				border: 1px solid transparent;
+				background: transparent;
+				border-radius: var(--newspack-ui-border-radius-s, 4px);
+				color: var(--newspack-ui-color-neutral-60, np-colors.$neutral-600);
+				font-size: var(--newspack-ui-font-size-xs, 14px);
+				line-height: var(--newspack-ui-spacer-5, 24px);
+				padding: calc(var(--newspack-ui-spacer-base, 8px) - 1px) calc(var(--newspack-ui-spacer-3, 16px) - 1px);
+				position: relative;
+				transition: all 125ms ease-in-out;
+				width: auto;
+
+				&:hover {
+					color: var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+				}
+
+				&:focus {
+					outline: none;
+					text-decoration: none;
+				}
+
+				&:focus-visible {
+					outline: 2px solid var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+					outline-offset: 1px;
+				}
+
+				&.wpbnbd__button--active {
+					background: var(--newspack-ui-color-neutral-0, np-colors.$neutral-000);
+					border-color: var(--newspack-ui-color-neutral-30, np-colors.$neutral-300);
+					color: var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+				}
+			}
+		}
+
+		&.untiered {
+			.input-container {
+				background: var(--newspack-ui-color-neutral-0, np-colors.$neutral-000);
+				border: 1px solid var(--newspack-ui-color-neutral-30, np-colors.$neutral-300);
+				border-bottom: 0;
+				border-radius: var(--newspack-ui-border-radius-l, 8px) var(--newspack-ui-border-radius-l, 8px) 0 0;
+				margin: var(--newspack-ui-spacer-2, 12px) 0 0;
+				padding: var(--newspack-ui-spacer-5, 24px);
+			}
+
+			.money-input {
+				left: 0;
+				right: 0;
+			}
+
+			.donate-label {
+				display: block;
+				margin-bottom: var(--newspack-ui-spacer-base, 8px);
+			}
+		}
+
+		&.tiered {
+			font-size: var(--newspack-ui-font-size-s, 16px);
+			line-height: var(--newspack-ui-line-height-s, 1.5);
+
+			.tiers {
+				color: var(--newspack-ui-color-neutral-60, np-colors.$neutral-600);
+				position: relative;
+
+				.tier-label {
+					background: var(--newspack-ui-color-neutral-10, np-colors.$neutral-100);
+					border: 0;
+					border-radius: var(--newspack-ui-border-radius-s, 4px);
+					color: inherit;
+					font-family: inherit;
+					font-weight: 600;
+					margin: 0;
+					padding: var(--newspack-ui-spacer-2, 12px) var(--newspack-ui-spacer-5, 24px);
+					text-align: center;
+					transition: background 125ms ease-in-out, color 125ms ease-in-out;
+
+					&:hover {
+						color: var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+					}
+				}
+
+				.odl {
+					bottom: calc(var(--newspack-ui-spacer-5, 24px) + var(--newspack-ui-spacer-9, 48px) + var(--newspack-ui-spacer-base, 8px));
+					color: var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+					font-weight: 600;
+					left: 0;
+					padding: 0 var(--newspack-ui-spacer-5, 24px);
+				}
+
+				input.other-input {
+					&:checked {
+						+ label {
+							margin-bottom: calc(var(--newspack-ui-spacer-5, 24px) + var(--newspack-ui-spacer-5, 24px) + var(--newspack-ui-spacer-base, 8px) + var(--newspack-ui-spacer-9, 48px));
+						}
+					}
+				}
+
+				input[type="radio"]:focus,
+				input[type="radio"]:checked {
+					+ .tier-label {
+						background: var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+						color: var(--newspack-ui-color-neutral-0, np-colors.$neutral-000);
+						outline: none;
+					}
+				}
+
+				input[type="radio"]:focus-visible + .tier-label {
+					outline: 2px solid var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+					outline-offset: 1px;
+				}
+			}
+
+			.money-input {
+				bottom: var(--newspack-ui-spacer-5, 24px);
+				left: var(--newspack-ui-spacer-5, 24px);
+				right: var(--newspack-ui-spacer-5, 24px);
+			}
+		}
+
+		button,
+		.submit-button {
+			font-family: inherit;
+			font-size: var(--newspack-ui-font-size-s, 16px);
+			font-weight: 600;
+			line-height: var(--newspack-ui-line-height-s, 1.5);
+			margin: 0;
+		}
+
+		button[type="submit"],
+		.submit-button {
+			margin: 0 calc(1px + var(--newspack-ui-spacer-5, 24px)) calc(1px + var(--newspack-ui-spacer-5, 24px));
+			position: relative;
+			padding: var(--newspack-ui-spacer-2, 12px) var(--newspack-ui-spacer-5, 24px);
+			transition: opacity 125ms ease-in-out, outline 125ms ease-in-out;
+			width: calc(100% - 2 * var(--newspack-ui-spacer-5, 24px) - 2px);
+			z-index: 1;
+
+			&:disabled {
+				pointer-events: none;
+			}
+
+			&:hover {
+				opacity: 0.8;
+			}
+
+			&:focus {
+				outline: 2px solid var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+				outline-offset: 1px;
+			}
+		}
+	}
+
+	/* Layout: Tiers */
+	&.wpbnbd--tiers-based {
+		color: var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+
+		.wpbnbd__tiers {
+			&__selection {
+				border-radius: var(--newspack-ui-border-radius-m, 6px);
+				gap: calc(var(--newspack-ui-spacer-base, 8px) / 2);
+				margin: 0 auto var(--newspack-ui-spacer-2, 12px);
+				padding: calc(var(--newspack-ui-spacer-base, 8px) / 2);
+				width: min-content;
+
+				&:has(:nth-child(3)) {
+					max-width: 300px;
+					width: 100%;
+
+					> .wpbnbd__button {
+						padding-left: calc(var(--newspack-ui-spacer-2, 12px) - 1px);
+						padding-right: calc(var(--newspack-ui-spacer-2, 12px) - 1px);
+						width: 100%;
+					}
+				}
+
+				.wpbnbd__button {
+					border-radius: var(--newspack-ui-border-radius-s, 4px);
+					color: var(--newspack-ui-color-neutral-60, np-colors.$neutral-600);
+					font-size: var(--newspack-ui-font-size-xs, 14px);
+					font-weight: 600;
+					line-height: var(--newspack-ui-spacer-5, 24px);
+					overflow: hidden;
+					padding: calc(var(--newspack-ui-spacer-base, 8px) - 1px) calc(var(--newspack-ui-spacer-3, 16px) - 1px);
+					transition: all 125ms ease-in-out;
+					width: auto;
+
+					&:hover,
+					&--active {
+						color: var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+					}
+
+					&:focus {
+						outline: none;
+					}
+
+					&:focus-visible {
+						outline: 2px solid var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+						outline-offset: 1px;
+					}
+				}
+			}
+
+			&__heading {
+				align-self: flex-start;
+				font-family: inherit;
+				font-size: var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem));
+				font-weight: 700;
+				line-height: var(--newspack-ui-line-height-m, 1.6);
+			}
+
+			&__options {
+				margin-left: calc(var(--newspack-ui-spacer-2, 12px) / -2);
+				margin-right: calc(var(--newspack-ui-spacer-2, 12px) / -2);
+			}
+
+			&__tier {
+				background: var(--newspack-ui-color-neutral-0, np-colors.$neutral-000);
+				border-color: var(--newspack-ui-color-neutral-30, np-colors.$neutral-300);
+				border-radius: var(--newspack-ui-border-radius-m, 6px);
+				margin-left: calc(var(--newspack-ui-spacer-2, 12px) / 2);
+				margin-right: calc(var(--newspack-ui-spacer-2, 12px) / 2);
+				padding: var(--newspack-ui-spacer-5, 24px);
+
+				&--recommended {
+					border: 1px solid var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+					outline: 1px solid var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+					outline-offset: -2px;
+				}
+
+				&:not( #{&}--recommended ) {
+					button[type="submit"],
+					.submit-button {
+						&:hover {
+							background: var(--newspack-ui-color-neutral-5, np-colors.$neutral-050) !important;
+							opacity: 1;
+						}
+					}
+				}
+			}
+
+			&__top {
+				align-items: center;
+				flex-wrap: wrap-reverse;
+				gap: calc(var(--newspack-ui-spacer-base, 8px) / 2) var(--newspack-ui-spacer-3, 16px);
+				margin-bottom: calc(var(--newspack-ui-spacer-base, 8px) / 2);
+			}
+
+			&__recommend-label {
+				background: var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+				border-radius: var(--newspack-ui-border-radius-2xs, 2px);
+				color: var(--newspack-ui-color-neutral-0, np-colors.$neutral-000);
+				font-family: inherit;
+				font-size: var(--newspack-ui-font-size-xs, 14px);
+				font-weight: 600;
+				height: auto;
+				line-height: var(--newspack-ui-line-height-xs, 1.4286);
+				padding: calc(var(--newspack-ui-spacer-base, 8px) * 0.25) calc(var(--newspack-ui-spacer-base, 8px) * 0.75);
+				word-break: break-word;
+			}
+
+			&__amount {
+				margin-bottom: var(--newspack-ui-spacer-5, 24px);
+
+				&__value {
+					color: var(--newspack-ui-color-neutral-60, np-colors.$neutral-600);
+					font-size: var(--newspack-ui-font-size-2xs, 12px);
+					line-height: var(--newspack-ui-line-height-2xs, 1.3333);
+				}
+
+				.amount {
+					color: var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+					font-family: inherit;
+					font-size: var(--newspack-ui-font-size-xl, clamp(1.375rem, 0.394rem + 2.008vw, 2rem));
+					line-height: var(--newspack-ui-line-height-xl, 1.375);
+					word-break: break-all;
+				}
+			}
+
+			&__description {
+				font-size: var(--newspack-ui-font-size-xs, 14px);
+				line-height: var(--newspack-ui-line-height-xs, 1.4286);
+				margin: var(--newspack-ui-spacer-5, 24px) 0 0;
+			}
+
+			button[type="submit"],
+			.submit-button {
+				border-width: 1px;
+				font-family: inherit;
+				font-size: var(--newspack-ui-font-size-s, 16px);
+				font-weight: 600;
+				line-height: var(--newspack-ui-line-height-s, 1.5);
+				margin: auto 0 0;
+				padding: calc(var(--newspack-ui-spacer-2, 12px) - 1px) calc(var(--newspack-ui-spacer-5, 24px) - 1px);
+				transition: background 125ms ease-in-out, border-color 125ms ease-in-out, opacity 125ms ease-in-out, outline 125ms ease-in-out;
+
+				&:hover {
+					opacity: 0.8;
+				}
+
+				&:focus {
+					outline: 2px solid var(--newspack-ui-color-neutral-90, np-colors.$neutral-900);
+					outline-offset: 1px;
+				}
+			}
+		}
+	}
+}