@use '../variables' as *;

.#{$prefix}swipe {
	position: relative;

	&__content {
		position: relative;
		overflow-x: hidden;
		display: flex;
		align-items: center;
		gap: var(--#{$prefix}swipe-gap);

		@media (max-width: 767px) and (hover: none) {
			overflow-x: auto;
		}
	}

	&__start-content,
	&__end-content {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
	}

	&__start-content {
		left: 0.5rem;
	}

	&__end-content {
		right: 0.5rem;
	}

	&--auto-hide &__start-content,
	&--auto-hide &__end-content {
		transform: translateY(-50%) scale(0);
		transition: all 0.2s ease-in-out;
	}

	&--auto-hide:hover &__start-content,
	&--auto-hide:hover &__end-content {
		transform: translateY(-50%) scale(1);
	}

	&--start &-item {
		&:last-child {
			margin-right: auto;
		}
	}

	&--center &-item {
		&:first-child {
			margin-left: auto;
		}

		&:last-child {
			margin-right: auto;
		}
	}

	&--end &-item {
		&:first-child {
			margin-left: auto;
		}
	}

	&-item {
		flex-shrink: 0;
		position: relative;
	}
}