@use '@talend/bootstrap-theme/src/theme/guidelines' as *;

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

$tc-slider-thumb-shadow: 0 1px 2px 0 rgba(117, 132, 149, 0.5); //$slate-gray;
$tc-slider-thumb-shadow-focused: 0 3px 4px 0.5px rgba(0, 0, 0, 0.25);
$tc-slider-font-size: $font-size-base;
$tc-slider-line-height: 24px;

.tc-slider {
	padding: 0 calc(#{$tc-slider-line-height} / 2);

	:global(.rc-slider-disabled) {
		background-color: transparent;
		opacity: 0.4;
	}

	&__handler {
		position: relative;
	}

	&__value {
		position: absolute;
		top: -25px;
		color: tokens.$coral-color-accent-text-strong;
		font: tokens.$coral-paragraph-m-bold;
		box-shadow: none;
	}

	&-captions {
		display: inline-flex;
		justify-content: space-between;
		width: 100%;
		margin-top: $padding-small;
		color: tokens.$coral-color-neutral-text;
		font-size: $tc-slider-font-size;

		&-element {
			height: $tc-slider-line-height;
			width: $tc-slider-line-height;
			line-height: $tc-slider-line-height;
			min-height: $tc-slider-line-height;
			display: flex;
			justify-content: center;

			:global(svg) {
				height: $tc-slider-line-height;
				width: $tc-slider-line-height;
				margin: 0;
				color: tokens.$coral-color-neutral-icon-weak;

				&.selected {
					fill: tokens.$coral-color-accent-icon;
				}
			}
		}

		:global(.btn) {
			padding: 0;

			&.selected {
				:global(.tc-svg-icon) {
					fill: tokens.$coral-color-accent-text;
				}
			}
		}
	}

	&-rc-slider {
		margin-top: $padding-larger;

		:global(.rc-slider-step),
		:global(.rc-slider-rail),
		:global(.rc-slider-track) {
			height: 7px;
		}

		:global(.rc-slider-rail) {
			background-color: tokens.$coral-color-neutral-background-strong;
		}

		:global(.rc-slider-track) {
			background-color: tokens.$coral-color-accent-text;
		}

		:global(.rc-slider-handle) {
			border: 1px solid tokens.$coral-color-neutral-border;
			box-shadow: $tc-slider-thumb-shadow;
			background-color: tokens.$coral-color-neutral-background-medium;
			opacity: 1;

			&:hover,
			&:focus {
				background-color: tokens.$coral-color-neutral-background;
				box-shadow: $tc-slider-thumb-shadow-focused;
			}
		}

		&--track-greater-than,
		&--track-exclusive {
			:global {
				.rc-slider-rail {
					background-color: tokens.$coral-color-accent-text;
				}

				.rc-slider-track {
					background-color: tokens.$coral-color-neutral-background-medium;
				}
			}
		}

		&--track-equals {
			:global {
				.rc-slider-rail,
				.rc-slider-track {
					background-color: tokens.$coral-color-neutral-background-medium;
				}

				.rc-slider-handle {
					box-shadow: $tc-slider-thumb-shadow;
					background-color: tokens.$coral-color-accent-text;
				}
			}
		}
	}
}