@import '@resources/index.css';

.supt-section-prices {
	$mobile-version-breakpoint: 1200px;

	overflow: hidden;
	padding-top: 0;

	.supt-section__inner {
		@extend %grid;
	}

	.supt-section__headline {
		grid-column: 1 / span 12;
		@media (min-width: $sm-breakpoint) {
			grid-column: 2 / span 11;
		}
		@media (min-width: $md-breakpoint) {
			grid-column: 2 / span 10;
		}
		@media (min-width: $ml-breakpoint) {
			grid-column: 2 / span 8;
		}
	}

	.supt-section__title {
		@mixin clamp margin-bottom, 28, 56, $xxs-breakpoint, $lg-breakpoint;

		text-align: left;
	}

	.supt-section__content {
		grid-column: 1 / span 12;
		@media (min-width: $xxl-breakpoint) {
			grid-column: 2 / span 10;
		}

		.plans__container {
			display: grid;
			grid-template-columns: 1fr;
			gap: 0px;
			@media (min-width: $mobile-version-breakpoint) {
				gap: 24px;
			}

			.plan_cards {
				display: grid;
				grid-template-columns: 1fr;
				gap: 8px;
				margin-bottom: 8px;

				&.inactive {
					gap: 0px;

					.card_pivot {
						display: none;
						@media (min-width: $mobile-version-breakpoint) {
							display: inherit;
						}
					}
				}

				.card_pivot {
					display: grid;
					opacity: 1;
					transition: opacity ease-in-out 600ms 500ms;
				}

				@media (min-width: $mobile-version-breakpoint) {
					grid-column: 1;
					grid-row: 2;
					grid-template-columns: 1fr 1fr 1fr 1fr;
					transform: translate3d(0, 0, 0);
					gap: 24px;
					width: calc(100% + 0px);
					transition:
						transform ease-in-out 1s 100ms,
						width ease-in-out 500ms 600ms,
						gap ease-in-out 500ms 600ms;

					&.inactive {
						gap: 124px;
						width: calc(100% + 300px);
						transition:
							transform ease-in-out 1s 100ms,
							width ease-in-out 500ms 200ms,
							gap ease-in-out 500ms 200ms;

						&.medecin {
							transform: translate3d(140%, 0, 0);
						}
						&.paramedical {
							transform: translate3d(-140%, 0, 0);
						}

						.card_pivot {
							height: auto;
							opacity: 0;
							transition: opacity ease-in-out 600ms 100ms;
						}
					}
				}
			}
		}

		.plans_header {
			margin-bottom: 16px;
			grid-column: 1;
			@extend %t-s-normal-medium;
			display: flex;
			align-items: center;
			justify-content: center;

			@media (min-width: $mobile-version-breakpoint) {
				justify-content: space-between;
				border-radius: 32px;
				padding: 16px;
				margin-bottom: 0;
				background-color: $color-white;
			}

			.selector {
				background-color: $color-interface-grey-20;
				display: inline-flex;
				align-items: center;
				padding: 6px 24px;
				border-radius: 26px;
				gap: 16px;
				position: relative;
				cursor: pointer;

				span {
					z-index: 1;
				}

				.toggle {
					width: 60px;
					height: 32px;
					z-index: 1;
					padding: 4px;
					background-color: black;
					border-radius: 16px;

					.knob {
						background-color: white;
						height: 24px;
						width: 24px;
						border-radius: 12px;
						transition: all ease-in-out 0.35s;
						text-align: center;
						padding-top: 4px;

						svg {
							width: 18px;
							height: 18px;
						}
					}
					&.-active {
						.knob {
							margin-left: 28px;
							transform: rotate3d(0, 0, 1, 360deg);
						}
					}
				}

				&:not(.-cycle) {
					display: none;
					@media (min-width: $mobile-version-breakpoint) {
						display: inline-flex;
					}
				}

				&.-cycle {
					width: 100%;
					padding: 4px 20px;
					border: solid 2px $color-pink;
					background: none;
					justify-content: center;

					@media (min-width: $xs-breakpoint) {
						width: auto;
					}
				}
			}
		}
		.supt-card {
			grid-column: 1;
			grid-row: 1;
			transform-style: preserve-3d;
			backface-visibility: hidden;
			button {
				cursor: pointer;
			}

			@media (min-width: $mobile-version-breakpoint) {
				transition:
					transform ease-in-out 0.2s,
					outline linear 0.15s,
					margin linear 0.15s;
				height: auto;

				&.-active {
				}
				&:hover {
					transform: translateY(-5px);
					transition-duration: 0.15s;
					z-index: 2;
				}
			}
		}

		.plans_accordion {
			background-color: $color-white;
			border-radius: 16px;
			padding: 0 24px;
			margin-bottom: 8px;
			display: flex;
			flex-direction: row;
			vertical-align: middle;

			&:last-of-type() {
				margin: 0;
			}

			@media (min-width: $mobile-version-breakpoint) {
				display: none;
			}

			span {
				@extend %t-s-medium;
				flex-grow: 1;
				line-height: 60px;
			}
			.plans_accordion__circle {
				width: 28px;
				height: 28px;
				padding: 2px 8px;
				align-self: center;
				border-radius: 14px;
				vertical-align: middle;
				transform: rotate3d(0, 0, 1, 180deg);
				transition:
					background-color linear 0.35s,
					transform linear 0.15s;
			}

			&.active .plans_accordion__circle {
				background-color: $color-pink;
				transform: rotate3d(0, 0, 0, 180deg);
			}
		}
	}
}