@import '@resources/index.css';

.supt-section-history {
	z-index: 2 !important;
	overflow: scroll;
	@media (min-width: $sm-breakpoint) {
		overflow: visible;
	}

	&__inner {
		@extend %grid;

		@media (min-width: $sm-breakpoint) {
			@mixin clamp top, 80, 160, $xxs-breakpoint, $lg-breakpoint;
			position: sticky;
		}

		@media (max-width: calc($sm-breakpoint - 1px)) {
			margin: 0;
		}
	}
	&__dates,
	&__content {
		position: sticky;
		left: 16px;
		justify-self: baseline;

		@media (min-width: $sm-breakpoint) {
			position: relative;
			left: 0;
		}
	}

	&__dates {
		grid-column: 1 / span 12;

		display: flex;
		align-items: center;
		justify-content: center;

		width: calc(100vw - 16px * 2);

		@media (min-width: $sm-breakpoint) {
			width: auto;

			grid-column: 1 / span 6;

			justify-content: flex-end;
			align-items: flex-start;

			place-self: center;
		}
		@media (min-width: $md-breakpoint) {
			grid-column: 2 / span 4;
			justify-self: end;
		}

		&__list {
			padding-top: 20px;

			display: flex;
			flex-direction: row;
			gap: 32px;
			@media (min-width: $sm-breakpoint) {
				flex-direction: column;
				gap: 0;
				height: 0;
			}
		}

		&__prefix,
		&__date {
			@extend %t-xxl;
			@mixin clamp font-size, 80, 200, $xxs-breakpoint, $lg-breakpoint;
			line-height: 1;
			white-space: nowrap;
			font-variant-numeric: tabular-nums;
			letter-spacing: -4px;
		}
		&__prefix {
			color: $color-interface-grey-100;
			display: none;

			@media (min-width: $sm-breakpoint) {
				display: block;
			}
		}
		&__date {
			display: block;
			color: $color-interface-grey-20;
			margin-top: -20px;
			transition: color 0.3s;

			@media (min-width: $sm-breakpoint) {
				text-align: right;
			}

			&__prefix {
				@media (min-width: $sm-breakpoint) {
					display: none;
				}
			}

			&.-is-current {
				color: $color-interface-grey-100;
			}
		}
	}

	&__content {
		grid-column: 1 / span 12;

		display: flex;
		flex-direction: row;
		gap: 12px;

		margin-left: $container-min-offset;
		/* overflow: scroll; */
		@media (min-width: $sm-breakpoint) {
			/* overflow: visible; */

			grid-column: 7 / span 6;
			flex-direction: column;
			gap: 24px;

			margin-left: 0;

			width: 100%;
		}
		@media (min-width: $md-breakpoint) {
			grid-column: 7 / span 5;
		}
	}

	.supt-card-history {
		@mixin clamp --card-history-half-height, 250, 335, $xxs-breakpoint,
			$lg-breakpoint;

		width: calc(100vw - 41px - 16px);
		flex-shrink: 0;

		position: absolute;
		left: 0;

		transform-origin: 0 50%;

		@media (min-width: $sm-breakpoint) {
			left: auto;
			top: 0;
			left: 0;
			width: auto;
			transform-origin: 50% 0;
		}

		&:last-child {
			margin-right: 41px;
			@media (min-width: $sm-breakpoint) {
				margin-right: 0;
			}
		}
	}
}