@import '@resources/index.css';

.supt-prices-modal-summary {
	@mixin clamp padding-top, 20, 40, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-right, 16, 24, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-bottom, 16, 24, $xxs-breakpoint, $lg-breakpoint;
	@mixin clamp padding-left, 16, 24, $xxs-breakpoint, $lg-breakpoint;

	@mixin clamp --prices-modal-summary-lateral-margin, 16, 32, $xxs-breakpoint,
		$lg-breakpoint;
	margin: 0 calc(-1 * var(--prices-modal-summary-lateral-margin));

	grid-column: span 12;

	position: fixed;
	bottom: 0;
	z-index: 2;

	width: 100%;
	height: max-content;
	background-color: $color-pink;

	@media screen and (min-width: $md-breakpoint) {
		grid-column: 8 / span 5;
		position: sticky;
		top: 60px;
		margin-right: 0;
		margin-left: 0;
		border-radius: 32px;
	}

	@media screen and (min-width: $lg-breakpoint) {
		grid-column: 8 / span 4;
	}

	&__details {
		display: none;
		flex-direction: column;
		gap: 40px;
		padding-right: 16px;
		padding-left: 16px;

		@media screen and (min-width: $md-breakpoint) {
			display: flex;
		}

		&__title {
			@extend %t-sm-medium;
		}
		&__selection {
			@extend %t-s-normal;
			margin-top: 4px;
		}

		&__content {
			display: flex;
			flex-direction: column;
			gap: 16px;

			&__section {
				display: none;

				@media screen and (min-width: $sm-breakpoint) {
					display: block;
				}

				&__title {
					@extend %t-xs-normal;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 8px;
				}

				&__divider {
					border: none;
					border-bottom: 1px solid rgba($color-white, 40%);
					margin: 0;
				}

				&__result {
					@extend %t-s-normal-medium;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					margin-top: 16px;
					margin-bottom: 16px;
				}
			}
		}
	}
}