@use '@talend/design-tokens/lib/tokens' as tokens;

$module: range-filter;

.#{$module} {
	:global(.rc-slider-mark-text),
	:global(.rc-slider-mark-text-active) {
		color: tokens.$coral-color-neutral-text;
	}

	&__slider {
		margin: 20px 0 30px;
	}

	&__slider-mark {
		position: relative;
		display: block;
		width: 100%;
		white-space: nowrap;

		&--top {
			top: -36px;
		}

		&--bottom-left {
			position: absolute;
			text-align: left;
		}

		&--bottom-right {
			transform: translateX(50%);
		}
	}

	:global {
		.rc-slider-mark-text:last-child {
			left: initial !important; // stylelint-disable declaration-no-important
			right: 0;
		}

		.rc-slider-dot {
			border: 0;
			bottom: 0;
		}
	}

	&__form {
		display: flex;
		justify-content: space-evenly;
	}

	&__input-container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	&__label {
		font: tokens.$coral-paragraph-m-bold;
		margin-right: tokens.$coral-spacing-s;
	}
}