.supt-accordion {
	width: 100%;
	/* inline-size: 50ch; */

	@media (prefers-reduced-motion: no-preference) {
		interpolate-size: allow-keywords;
	}

	summary {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: $spacing-5;
		padding: $spacing-4 $spacing-1-5;
		color: $color-black;
		border-top: 1px solid $color-grey-2;

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

		&::before {
			content: '';
			position: absolute;
			top: -1px;
			left: 0;
			display: block;
			width: 100%;
			height: 1px;
			background-color: $color-main;
			transform: scaleX(0);
			transform-origin: left;
			transition: transform $transition-fast ease-in-out;
			z-index: 2;
		}

		span {
			@extend %t-sm;
			font-weight: $font-weight-medium;
		}

		svg {
			width: 12px;
			height: 12px;
			transition: transform $transition-fast ease-in-out;

			@media (min-width: $breakpoint-md) {
				width: 16px;
				height: 16px;
			}
		}

		&::-webkit-details-marker {
			display: none;
		}
		&::marker {
			display: none;
		}

		&:focus-visible {
			color: $color-medium;
		}

		&:focus {
			outline: none;
			box-shadow: none;
		}
	}

	&__body {
		padding: 0 $spacing-8 $spacing-6 $spacing-1-5;

		@media (min-width: $breakpoint-md) {
			padding-right: $spacing-12;
			padding-bottom: $spacing-8;
		}

		p {
			@extend %paragraph;
			color: $color-grey-5;
		}
	}

	&::details-content {
		opacity: 0;
		block-size: 0;
		overflow-y: clip;
		transition:
			content-visibility $transition-fast allow-discrete ease-in-out,
			opacity $transition-fast ease-in-out,
			block-size $transition-fast ease-in-out;
	}

	&[open] {
		summary {
			color: $color-main;

			&::before {
				transform: scaleX(1);
			}

			svg {
				transform: rotate(-180deg);
			}

			&:focus-visible {
				color: $color-medium;

				&::before {
					background-color: $color-medium;
				}
			}
		}

		&::details-content {
			opacity: 1;
			block-size: auto;
		}
	}

	&:last-child {
		border-bottom: 1px solid $color-grey-2;
	}
}