@import "@Themes/constants.scss";

.root {
	display: flex;
	justify-content: baseline;
	align-items: center;
	flex-direction: column;
	gap: 64px;
	max-width: 1000px;
	margin: auto;

	@media (max-width: $screen-m) {
		margin-top: 24px;
	}
	.top-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.forfeits-container {
		display: flex;
		gap: 32px;

		width: 100%;

		@media (max-width: $screen-s) {
			flex-direction: column;
		}

		.forfeit-block {
			flex: 1;
			padding: 32px;
			border: 1px solid black;

			display: flex;
			flex-direction: column;
			gap: 32px;
			height: fit-content;

			&[data-inactive="true"] {
				border: 1px solid #e7e7e7;
			}

			.forfeit-header {
				display: flex;
				justify-content: space-between;
				.left {
					display: flex;
					flex-direction: column;
				}

				.active-plan {
					@media (max-width: $screen-s) {
						display: none;
					}
				}
			}

			.separator {
				border-bottom: 1px solid black;
			}

			.price-container {
				display: flex;
				flex-direction: column;
				gap: 8px;

				.price {
					display: flex;
					align-items: flex-end;
				}
			}

			.button-container {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}
		}
	}

	.actions-container {
		display: flex;
		align-items: center;
		gap: 48px;
		justify-content: flex-end;
		justify-self: flex-end;
		align-self: flex-end;
		margin-bottom: 64px;

		@media (max-width: $screen-s) {
			flex-direction: column-reverse;
			align-self: center;
			justify-self: center;
		}
	}
}