@import './../../stylesheets/abstracts/variables';

.wcpay-wizard-task {
	margin-bottom: 0;

	&:first-child {
		.wcpay-wizard-task__top-border {
			display: none;
		}
	}

	&:last-child {
		.wcpay-wizard-task__body {
			border-left: none;
		}
	}

	&__top-border,
	&__body {
		min-height: 16px;
		border-left: 1px solid #e0e0e0;
		margin: 0 11px;
	}

	&__headline {
		display: flex;
		align-items: center;
		flex-direction: row;
		margin: 4px 0;
		font-weight: 600;
		font-size: 16px;
		color: #2c3338;

		.is-active & {
			color: var( --wp-admin-theme-color );
		}
	}

	&__title {
		padding: 0 16px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		> * {
			&:not( :last-child ) {
				margin-right: 4px;
			}
		}
	}

	&__icon-wrapper {
		position: relative;
		width: 24px;
		height: 24px;
		padding: 0;
		border-radius: 9999px;
		border: 1px solid #e0e0e0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;

		.is-active & {
			border-color: var( --wp-admin-theme-color );
		}

		.is-completed & {
			border-color: var( --wp-admin-theme-color );
			background-color: var( --wp-admin-theme-color );
		}
	}

	&__icon-text {
		font-size: 13px;

		.is-completed & {
			opacity: 0;
		}
	}

	&__icon-checkmark {
		opacity: 0;
		transition: opacity 500ms ease;
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		fill: $white;

		.is-completed & {
			opacity: 1;
		}
	}

	&__body {
		display: flex;
		flex-direction: column;
		padding: 0 30px;
		font-size: 13px;
	}

	// this class can be applied to `p` elements, for example, but also to `div` elements.
	// all `p` elements have a margin on the top, but we don't need it.
	&__description-element {
		margin-top: 0;
		margin-bottom: 1em;

		&.is-muted-color {
			color: $gray-700;
		}

		.components-external-link svg {
			width: 1em;
			height: 1em;
		}
	}

	&__visible-description-element {
		position: absolute;
		margin-left: 40px;
		margin-top: 0;
		margin-bottom: 1em;

		&.is-muted-color {
			color: $gray-700;
		}

		.components-external-link svg {
			width: 1em;
			height: 1em;
		}
	}

	.add-payment-methods-task {
		&__payment-selector {
			&-wrapper {
				// Reduce the wrapper's bottom margin and move the difference on the description.
				margin-bottom: $gap-large;
			}

			&-title {
				font-weight: 600;
				font-size: 16px;
			}

			&-description {
				margin-bottom: $gap-large;
			}
		}
	}
}
