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

$color-pink: #f4b1ff;
$dark-blue: #022836;
$light-blue: #5ab7e8;
$dark-green: #104e30;
$light-green: #53dc81;
$dark-golden-beige: #d8a45f;
$light-golden-beige: #f2d6b0;

.agency-tier-overview {
	.hosting-dashboard-layout__header-actions {
		display: flex;
		flex-direction: column;
		align-items: normal;
		justify-content: normal;
	}
}

.agency-tier-overview__top-content {
	display: grid;
	gap: 14px;
	padding-block: 16px;

	@include break-wide {
		grid-template-columns: 2fr 1fr;
		align-items: stretch;
	}
}

.agency-tier-overview__top-content-left {
	.agency-tier-overview__current-tier-container {
		display: flex;
		height: 100%;

		@include break-medium {
			min-height: 180px;
		}

		@include break-xlarge {
			min-height: 220px;
			background-color: var( --color-neutral-0 );
			border-radius: 8px;
			border: 1px solid var( --color-gray-5 );
		}

		@include break-wide {
			min-height: 230px;
		}
	}

	.agency-tier-overview__current-tier-badge {
		position: relative;
		z-index: 1;
		border-radius: 8px 200px 200px 8px; /* stylelint-disable-line scales/radii */
		padding: 24px;
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
		background-color: $color-pink;
		min-height: 150px;

		@include break-xlarge {
			flex: 0 0 70%;
		}

		&::before {
			content: '';
			display: inline-block;
			position: absolute;
			right: -25%;
			top: 15px;
			width: 100%;
			height: 100%;
			transform: scale( 0.8 );

			@include break-large {
				transform: unset;
				right: -30%;
				top: unset;
			}

			@include break-xlarge {
				right: -25%;
			}

			@include break-wide {
				right: -15%;
			}

			@include break-huge {
				right: -24%;
			}
		}

		.agency-tier-overview__current-agency-tier {
			width: 65%;

			@include break-xlarge {
				width: 50%;
			}

			@include break-huge {
				width: 55%;
			}
		}

		.agency-tier-overview__current-agency-tier-label {
			@include body-small;
			text-transform: uppercase;
			opacity: 0.7;
			text-wrap: balance;

			@include break-xlarge {
				@include heading-medium;
			}
		}

		.agency-tier-overview__current-agency-tier-title {
			@include heading-x-large;

			@include break-xlarge {
				@include heading-2x-large;
			}
		}

		&.is-default {
			.agency-tier-overview__current-agency-tier-title {
				@include body-small;
				text-transform: uppercase;

				@include break-xlarge {
					@include heading-medium;
				}
				opacity: 0.7;
			}

			&::before {
				background: url( calypso/assets/images/a8c-for-agencies/agency-tier/no-tier-logo.svg )
					no-repeat center/contain;
				right: -20%;
				top: 15px;

				@include break-large {
					top: 0;
				}
			}
		}

		&.emerging-partner {
			&::before {
				background: url( calypso/assets/images/a8c-for-agencies/agency-tier/emerging-partner-logo.svg )
					no-repeat center/contain;
			}
		}

		&.agency-partner {
			background-color: $dark-blue;

			&::before {
				background: url( calypso/assets/images/a8c-for-agencies/agency-tier/agency-partner-logo.svg )
					no-repeat center/contain;
				right: -70px;
				top: 15px;

				@include break-large {
					right: -95px;
					top: 5px;
				}
			}
		}

		&.pro-agency-partner {
			background-color: $dark-green;

			&::before {
				background: url( calypso/assets/images/a8c-for-agencies/agency-tier/pro-agency-partner-logo.svg )
					no-repeat center/contain;
			}
		}

		&.premier-partner {
			background: $dark-golden-beige;

			&::before {
				background: url( calypso/assets/images/a8c-for-agencies/agency-tier/premier-partner-logo.svg )
					no-repeat center/contain;
			}

			.agency-tier-overview__current-agency-tier-label,
			.agency-tier-overview__current-agency-tier-title {
				color: var( --color-text-black );
			}
		}

		&.agency-partner,
		&.pro-agency-partner {
			.agency-tier-overview__current-agency-tier-label,
			.agency-tier-overview__current-agency-tier-title {
				color: var( --color-text-white );
			}
		}
	}

	.agency-tier-overview__current-tier-aside {
		box-sizing: border-box;
		margin: auto;
		padding: 24px;
		display: none;

		@include break-xlarge {
			flex: 0 0 30%;
			display: block;
		}

		div {
			@include body-large;
			margin-block-end: 8px;
		}

		a {
			@include body-large;
			padding: 0;
			text-decoration: underline;
			color: var( --color-text-black );
		}
	}
}

.agency-tier-overview__top-content-right {
	@include break-wide {
		margin-inline-start: 12px;
	}
}

.agency-tier-overview__bottom-content {
	padding-block-start: 24px;

	@include break-large {
		padding-block-start: 40px;
	}
}

.agency-tier-overview__bottom-content-subheading {
	@include body-medium;
}

.agency-tier-overview__bottom-content-heading {
	@include heading-2x-large;
}

.agency-tier-overview__bottom-content-cards {
	display: grid;
	gap: 24px;
	padding-block-start: 40px;

	.card.agency-tier-overview__benefit-card {
		min-height: 300px;
	}

	@include break-large {
		grid-template-columns: repeat( 2, 1fr );
	}

	@include break-wide {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.card.agency-tier-overview__benefit-card {
	margin-inline: 0;
	padding: 24px;
	border-radius: 8px;
}

.agency-tier-overview__benefit-card-icons {
	display: flex;
	align-items: center;

	.agency-tier-overview__benefit-card-icon {
		margin-inline-end: 4px;
	}
}

.agency-tier-overview__benefit-card-header {
	display: grid;
	grid-template-columns: 50% 50%;
	padding-block-end: 24px;
}

.agency-tier-overview__benefit-card-title {
	@include heading-large;
	padding-block-end: 4px;
}

.agency-tier-overview__benefit-card-desciption {
	@include body-medium;
	padding-block-end: 24px;
}

.agency-tier-overview__benefit-card-features {
	display: grid;
	gap: 8px;
	margin: 0 0 0 0.8rem;
	list-style-image: url( calypso/assets/images/a8c-for-agencies/agency-tier/list-icon.svg );

	li {
		@include body-small;
		padding-inline-start: 8px;
	}
}

.agency-tier-overview__benefit-card-coming-soon {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;

	.badge {
		@include body-small;
		display: flex;
		align-items: center;
	}
}

.agency-tier-overview__benefit-card-items {
	padding-block-start: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;

	.agency-tier-overview__benefit-card-item {
		.agency-tier-overview__benefit-card-item-icon {
			position: relative;
			display: inline-flex;

			img {
				transform: scale( 1.5 );
			}

			.agency-tier-overview__benefit-card-item-icon-check {
				position: absolute;
				background: var( --color-text-white );
				border-radius: 50%;
				width: 23px;
				height: 23px;
				display: flex;
				justify-content: center;
				align-items: center;
				top: 11.5px;
				left: 24px;

				span {
					padding: 4px;
					border-radius: 50%;
					width: 10px;
					height: 10px;
					display: flex;
					justify-content: center;
					align-items: center;

					svg {
						transform: scale( 1.7 );
					}
				}

				&.emerging-partner {
					span {
						background: $color-pink;
					}
					svg {
						stroke: $dark-blue;
					}
				}

				&.agency-partner {
					span {
						background: $dark-blue;
					}
					svg {
						fill: var( --color-text-white );
						stroke: $light-blue;
					}
				}

				&.pro-agency-partner {
					span {
						background: $dark-green;
					}
					svg {
						fill: var( --color-text-white );
						stroke: $light-green;
					}
				}

				&.premier-partner {
					span {
						background: $dark-golden-beige;
					}
					svg {
						fill: var( --color-text-white );
						stroke: $light-golden-beige;
					}
				}
			}
		}

		.agency-tier-overview__benefit-card-item-title {
			@include heading-medium;
			position: relative;
			top: -6px;
			left: 24px;
		}
	}
}
