/**
 * New components style
 	- it's mostly style overrides
 */

// ActionCard component
.card.action-card {
	box-shadow: 0 1px 0 var(--studio-gray-5);

	&.is-compact {
		display: flex;
		padding: 12px 0;
	}

	&:last-child {
		box-shadow: none;
	}

	.action-card__heading {
		margin: 0 0 2px;
		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
		line-height: 1.2em;
		color: 0 1px 0 var(--studio-gray-100);
	}

	.action-card__main p {
		color: var(--studio-gray-40);
		font-size: 0.875em;
		margin-bottom: 0;
	}

	.action-card__button-container {
		text-align: right;
		margin-bottom: 0;
	}

	.action-card__button-container a,
	.action-card__button-container button {
		text-align: right;
		padding-right: 0;
		border: none;
	}

	.action-card__button-container a svg,
	.action-card__button-container button svg {
		fill: var(--studio-gray-30);
	}
}

// Modal component
.components-modal__frame.components-modal-new__frame {
	border-radius: 4px;

	p {
		font-size: 1rem;
		color: var(--studio-gray-70);
		margin-bottom: 1em;

		@include break-small {
			font-size: 1.125rem; /* stylelint-disable-line scales/font-sizes */
			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
			line-height: 1.4444em;
		}
	}

	strong {
		font-weight: 500;
	}

	.components-modal__content {
		display: block;
		margin-top: 0;
		padding: 40px;
		overflow: auto;

		&::before {
			margin: 0;
		}
	}

	.components-modal__header {
		position: static;
		display: block;
		height: auto;
		border: none;
		margin-top: 0;
		padding: 0;

		button {
			position: absolute;
			top: 10px;
			right: 10px;
			left: auto;
			padding: 0;

			svg {
				width: 34px;
				height: 34px;
			}
		}

		.components-modal__header-heading-container {
			display: block;
		}

		.components-modal__header-heading {
			font-size: 2rem;
			font-weight: normal;
			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
			line-height: 1.25em;
			margin-bottom: 0.75em;
		}

	}

	.components-modal__button-actions {
		text-align: right;
		margin-top: 2.5rem;

		& > button:not(:last-child) {
			margin-right: 1rem;
		}

		button {
			border-radius: 4px;
			font-weight: 500;
		}

		.action-buttons__cancel {
			color: var(--studio-gray-100);
		}

		.action-buttons__next.is-primary {
			border: none;
		}
	}
}
