@use "~admin-stylesheets/colors";

.nelio-content-premium-dialog {

	&.components-modal__frame {
		max-width: 35em;
		width: 100%;
	}

	.components-modal__header {
		border-bottom: 1px solid colors.$layout-colors__border--is-subtle;
		padding: 24px 32px;

		&-heading-container {
			display: block;
		}
	}

	&__custom-header {
		align-items: center;
		display: flex;
		flex-direction: row;
		font-weight: 500;
		gap: 0.5em;
		justify-content: left;

		&-title {
			flex-grow: 1;
		}
	}

	&__actions {
		margin-top: 2em;
		text-align: right;
	}

	&__confirm-action.components-button {
		margin-left: 0.5em;
	}

	&__button-wrapper {
		text-align: center;
	}

	&__subscribe-button {
		background: #ff6c00 !important;
		border-radius: 4px;
		font-size: 1.2em;
		outline-color: #ff6c00 !important;
		padding: 1.5em 2em;
		transition: all 200ms ease-in-out;

		&:hover {
			background: #ff8830 !important;
		}

		&:active {
			background: #f06600 !important;
			outline-color: #f06600 !important;
		}
	}

	&__extra-features {
		margin-top: 2em;
		padding-top: 2em;
		border-top: 1px solid colors.$layout-colors__border--is-subtle;

		> p:first-child {
			margin-top: 0;
		}

		li {
			margin-left: 2em;
			/* stylelint-disable function-url-quotes */
			list-style-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 1792 1792'%3E%3Cpath fill='%2377B227' d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68'/%3E%3C/svg%3E");
			/* stylelint-enable function-url-quotes */

			&::marker {
				font-size: 2em;
			}
		}
	}
}