@import "./../../mixins/scss/mixins";

:host {
	.slides {
		@include base();

		&::-webkit-scrollbar {
			display: none; /* Safari and Chrome */
		}
		-ms-overflow-style: none; /* Internet Explorer 10+ */
		scrollbar-width: none; /* Firefox */
		flex-wrap: nowrap !important;
		overflow-y: auto;
		max-width: unset !important;
		flex: 1 0 fit-content !important;
	}

	.slider {
		&::-webkit-scrollbar {
			display: none; /* Safari and Chrome */
		}
		-ms-overflow-style: none; /* Internet Explorer 10+ */
		scrollbar-width: none; /* Firefox */
	}

	.arrow {
		align-self: center;
	}

	.dot {
		width: 10px;
		height: 10px;
		fill: var(--color-surface-secondary);

		transition-property: width, height, fill, transform;
		transition-duration: 0.3s;
		transition-timing-function: ease-out;

		cursor: pointer;

		&.active {
			width: 12px;
			height: 12px;
			fill: var(--color-text-default);
		}

		&.secondary {
			width: 10px;
			height: 10px;
			fill: var(--color-text-secondary);
		}

		&.tertiary {
			width: 8px;
			height: 8px;
			fill: var(--color-text-subtle);
		}
	}
	.dot-container {
		cursor: pointer;

		&:hover {
			.dot {
				transform: scale(1.5);
				transition-duration: 0.2s;
				fill: var(--color-primary-default) !important;
			}
		}
	}
	.dot-wrapper {
		align-self: center;
		flex-wrap: nowrap;
		flex: 0 0 auto !important;
		overflow: visible !important;
		height: 20px;

		&::-webkit-scrollbar {
			display: none; /* Safari and Chrome */
		}
		-ms-overflow-style: none; /* Internet Explorer 10+ */
		scrollbar-width: none; /* Firefox */
	}
	.progress {
		transition-property: width;
		transition-timing-function: linear;
		background-color: var(--color-primary-default) !important;
	}
}