main.scss

@import '@financial-times/o-icons/main';
@import '@financial-times/o-colors/main';
@import '@financial-times/o-normalise/main';
@import '@financial-times/o-typography/main';
@import '@financial-times/o-forms/main';
@import '@financial-times/o-buttons/main';
@import '@financial-times/o-message/main';
@import '@financial-times/o-icons/main';
@import '@financial-times/o-stepped-progress/main';
@import '@financial-times/o-fonts/main';
@import './styles/package-change';
@import './styles/payment-term';
@import './styles/payment-type';
@import './styles/loader';
@import './styles/accept-terms';
@import './styles/message';
@import './styles/continue-reading';
@import './styles/banner';
@import './styles/customer-care';
@import './styles/forms-additional-field-information';
@import './styles/error';
@import './styles/graduation-date';
@import './styles/google-sign-in';
@import './styles/confirmation';
@import './styles/ft-edit-registration-confirmation';

@include oTypography();
@include oFonts();
@include oForms(
	$opts: (
		'elements': (
			'text',
			'password',
			'checkbox',
			'select',
			'radio-box',
			'radio-round',
			'textarea',
		),
		'features': (
			'disabled',
			'inline',
			'right',
			'suffix',
			'error-summary',
		),
	)
);
@include oMessage();
@include oSteppedProgress();

// Custom styles
.ncf {
	@include oTypographySans($scale: 0);

	&__divider-horizontal {
		margin: 0 0 16px;
		height: 0;
		left: 0;
		top: 0;
		border-top: thin solid rgba(0, 0, 0, 0.15);
	}

	&__wrapper {
		background: oColorsByName('white');
		padding: 20px;

		@include oGridRespondTo($from: S) {
			padding: 50px;
		}
	}

	&__margin {
		margin: 20px 0;

		@include oGridRespondTo($from: S) {
			margin: 50px;
		}
	}

	&__stepped-progress {
		margin: 0 20px;

		@include oGridRespondTo($from: S) {
			margin: 0;
		}
	}

	&__message {
		margin: 0 0 oSpacingByName('s6');

		@include oGridRespondTo($from: S) {
			margin: 0 0 oSpacingByName('s3');
		}
	}

	&__light-licence-text {
		font-weight: lighter;
	}

	&__bold-licence-text {
		font-weight: bold;
	}

	&__paragraph {
		padding: oSpacingByName('s4') 0;
		margin: 0;

		&--reduced-padding {
			padding: 0;
		}

		&--subscription-confirmation {
			margin: oSpacingByName('s4') 0 oSpacingByName('s2');
		}
	}

	&__fieldset {
		border: 0;
		margin: 0 0 10px;
		min-inline-size: auto;
		padding: 0;

		.ncf__header {
			margin: 0;
		}
	}

	&__legend {
		@include oTypographySans($weight: 'semibold', $include-font-family: false);
		padding: 0;
	}

	&__fieldset-descriptor {
		margin: 0;
		@include oTypographySans($scale: -1, $include-font-family: false);
	}

	&__fields:not(:first-child) {
		margin-top: oSpacingByName('s3');
	}

	&__field {
		&--center {
			text-align: center;
		}

		&--flex {
			display: flex;
			justify-content: space-between;
		}

		&--min-content {
			grid-template-columns: 1fr min-content min-content;
		}

		&--full-width-buttons {
			display: flex;
			justify-content: space-between;
			padding-left: 0;
			padding-right: 0;

			.ncf__button {
				flex: 1;

				+ .ncf__button {
					margin-left: 20px;
				}
			}
		}
	}

	&__terms {
		@include oTypographySans($scale: 0);
		color: oColorsByName('black-80');

		&--small {
			@include oTypographySans($scale: -1);
		}
	}

	&__header {
		@include oTypographyHeading($level: 3);

		&--confirmation {
			@include oTypographySerif($scale: 3);
			margin: oSpacingByName('s6') 0;
		}
	}

	&__headed-paragraph {
		.ncf__header {
			@include oTypographySans($scale: 2, $include-font-family: false);
			padding: 0;
			margin: 0 0 oSpacingByName('s1');
		}

		.ncf__paragraph {
			padding: 0;
		}
	}

	&__header2 {
		&--afterline {
			@include oTypographySans(
				$scale: 1,
				$include-font-family: false,
				$weight: 'semibold'
			);

			&:after {
				padding-top: oSpacingByName('s3');
				padding-bottom: 0;
				content: '';
				display: block;
				width: 90px;
				border-bottom: oSpacingByName('s1') solid oColorsByName('black');
			}
		}
	}

	&__link {
		@include oTypographyLink;
	}

	&__link--external {
		@include oTypographyLink($external: true);
	}

	&__button {
		&--submit {
			@include oButtonsContent(
				$opts: (
					'size': 'big',
					'type': 'primary',
				)
			);
		}

		&--mono {
			@include oButtonsContent(
				$opts: (
					'type': 'secondary',
					'theme': 'mono',
				)
			);
		}

		&--inverse {
			@include oButtonsContent(
				$opts: (
					'size': 'big',
					'theme': 'inverse',
					'type': 'secondary',
				)
			);
		}

		&--secondary {
			@include oButtonsContent(
				$opts: (
					'size': 'big',
					'type': 'secondary',
				)
			);
		}

		&--google {
			@include oButtonsContent(
				$opts: (
					'size': 'big',
					'type': 'secondary',
				)
			);
			background-color: oColorsByName('white');
			padding-left: 40px;

			&::before {
				content: '';
				background: transparent
					url('https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fwww.ft.com%2F__assets%2Fcreatives%2FG_active_focused_pressed.svg?source=m-login&width=20&height=20&format=svg')
					no-repeat;
				position: absolute;
				left: 10px;
				width: 18px;
				height: 18px;
			}
		}

		&--baseline {
			vertical-align: baseline;
		}

		&--mid-width {
			width: 30%;
		}

		&--margin {
			margin: 20px 0;
		}
	}

	&__center {
		text-align: center;
	}

	&__strong {
		font-weight: oFontsWeight('semibold');
	}

	&__regular {
		font-weight: oFontsWeight('regular');
	}

	&__icon {
		background: oColorsByName('paper');
		border: 2px solid oColorsByName('black-40');
		border-radius: 9999px;
		display: block;
		height: 20px;
		margin: 0 auto;
		width: 20px;
	}

	&__icon--tick {
		background: oColorsByName('teal');
		border-color: oColorsByName('teal');
		&::before {
			@include oIconsContent(
				$icon-name: 'tick',
				$color: oColorsByName('white'),
				$size: 20
			);
			content: '';
			color: oColorsByName('white');
		}
	}

	&__icon--phone {
		background: oColorsByName('teal');
		border-color: oColorsByName('teal');
		&::before {
			@include oIconsContent(
				$icon-name: 'phone',
				$color: oColorsByName('white'),
				$size: 20
			);
			content: '';
			color: oColorsByName('white');
		}
	}

	&__icon--error {
		background: oColorsByName('crimson');
		border-color: oColorsByName('crimson');
		&::before {
			@include oIconsContent(
				$icon-name: 'warning',
				$color: oColorsByName('white'),
				$size: 20
			);
			content: '';
			color: oColorsByName('white');
		}
	}

	&__icon--inline-edit {
		@include oIconsContent(
			$icon-name: 'edit',
			$color: oColorsByName('black'),
			$size: 20
		);
		border: 0;
		vertical-align: middle;
	}

	&__icon--large {
		width: 40px;
		height: 40px;
		&::before {
			width: 40px;
			height: 40px;
		}
	}

	&__icon-download {
		@include oIconsContent(
			$icon-name: 'download',
			$color: oColorsByName('black-70'),
			$size: 32
		);
		border: 0;
		vertical-align: middle;
	}

	&__list {
		&-title,
		&-data {
			width: calc(50% - 10px);
			margin: 8px 0;
			display: inline-block;
			vertical-align: middle;
		}
		&-description {
			margin: -10px 0 10px;
			@include oTypographySans($scale: -1, $include-font-family: false);
		}

		&-title {
			font-weight: oFontsWeight('semibold');
		}
	}

	&__delivery-option {
		@include bigRadioButton($className: '.ncf__delivery-option');
	}

	&__delivery-option--single {
		.ncf__delivery-option__label {
			// We need to hide the radio button if this the sole delivery option
			&::after,
			&::before {
				display: none;
			}
		}
	}

	&__unordered-list {
		padding-inline-start: 25px;
		> li {
			margin-bottom: oSpacingByName('s3');
		}
	}

	&__logo {
		display: block;
		margin: 0 auto 2rem;
		width: 40%;
	}

	@include ncfMessage();
	@include ncfPackageChange();
	@include ncfPaymentTerm();
	@include ncfPaymentType();
	@include ncfLoader();
	@include ncfContinueReading();
	@include ncfBanner();
	@include ncfCustomerCarePanel();
	@include ncfAcceptTermsList();
	@include ncfGraduationDate();
	@include ncfConfirmation();

	&__hidden {
		display: none !important;
	}

	.o-normalise-visually-hidden {
		@include oNormaliseVisuallyHidden;
	}
}

@include ncfGoogleSignIn();

.ncf__password-field .ncf__password-field--show-password {
	margin-top: 7px;
}