.supt-section-downloads {
	@mixin clamp padding-block, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
	background-color: $color-grey-background;

	&__title {
		@extend %t-h2;
		margin-bottom: 0;
	}

	&__files {
		margin-top: $spacing-8;
		@media (min-width: $breakpoint-md) {
			margin-top: 0;
		}
	}

	&__file {
		@mixin clamp gap, $spacing-4, $spacing-8, $breakpoint-xs, $breakpoint-xl;
		display: flex;
		align-items: center;
		justify-content: space-between;

		padding: $spacing-4 $spacing-1-5;
		border-top: 1px solid $color-grey-3;
		border-bottom: 1px solid $color-grey-3;
		position: relative;

		@media (min-width: $breakpoint-md) {
			padding: $spacing-5 $spacing-1-5;
		}

		&::before,
		&::after {
			content: '';
			position: absolute;
			left: 0;
			width: 100%;
			height: 1px;
			background-color: $color-main;
			transform-origin: right;
			transform: scaleX(0);
			transition: transform $transition-mid ease-in-out;
		}
		&::before {
			top: -1px;
		}
		&::after {
			bottom: -1px;
		}

		&__content {
			display: flex;
			flex-direction: column;
		}

		&__title {
			@extend %t-body-sm;
			font-weight: $font-weight-medium;
			transition: color $transition-fast;
		}
		&__infos {
			@extend %t-body-xs-uppercase;
			color: $color-grey-5;
		}

		svg {
			@mixin clamp width, 12px, 16px, $breakpoint-xs, $breakpoint-xl;
			height: auto;
			display: block;
			color: $color-main;
		}

		&:not(:first-child) {
			border-top: 0;
		}

		&:hover,
		&:focus-visible {
			.supt-section-downloads__file__title {
				color: $color-main;
			}

			&::before,
			&::after {
				transform-origin: left;
				transform: scaleX(1);
			}
		}
	}
}