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

.revoke-license-dialog {
	&.dialog.card {
		max-height: 100vh;
		max-width: 100vh;
		margin: 0;
		align-self: stretch;


		@include break-small {
			max-height: 90%;
			max-width: 90%;
			margin: auto 0;
			align-self: center;
		}
	}

	.dialog__content {
		max-width: 628px;
		align-self: stretch;
		height: 100%;

		@include break-small {
			align-self: center;
		}

		&,
		& p {
			@include body-large;
		}
	}

	.dialog__action-buttons {
		display: flex;
		justify-content: flex-end;
		align-items: stretch;
		background: var(--color-neutral-0);
		border: 0;
		padding: 12px 24px;

		a {
			margin-inline-end: auto;
			font-weight: 600;
			text-decoration: underline;
		}

		.button {
			margin-block-end: 16px;
		}

		/**
		 * .dialog__action-buttons has flex-direction to column-reverse on mobile
		 * so with this the button on the bottom has no margin on the bottom,
		 * but it is the first element on the tree
		 **/
		.button:first-child {
			margin-block-end: 0;
		}

		@include break-mobile {
			.button {
				margin-block-end: 0;
				margin-inline-start: 10px;
			}
		}


		@include break-small {
			align-items: center;
		}
	}

	.revoke-license-dialog__heading {
		margin: -16px -16px 16px;
		padding: 24px;
		@include heading-large;
		font-weight: 600;
		color: var(--color-neutral-60);
		border-bottom: 1px solid var(--color-neutral-5);

		@include break-mobile {
			margin: -24px -24px 24px;
		}
	}

	.revoke-license-dialog__warning {
		font-weight: 500;
		color: var(--color-error-60);

		.gridicon {
			position: relative;
			inset-block-start: 2px;
			margin-inline-end: 7px;
		}
	}

	.revoke-license-dialog__learn-more {
		text-decoration: underline;
	}

	ul {
		margin-inline-start: 39px;
		font-weight: 600;
		line-height: 30px;

		code {
			@include body-medium;
		}
	}
}
