@import "ansyn/less/colors";

:host {

	.upper-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: rgba(255, 255, 255, 1);
		font-size: 12px;

		.min {
			color: rgba(255, 255, 255, 0.75);
		}

		.max {
			color: rgba(255, 255, 255, 0.75);
		}
	}

	.slider {
		/deep/ .ui-slider {
			height: 10px;
			background: transparent;
			margin: 0 10px 0 10px;
			box-shadow: none;

			&::after {
				content: '';
				position: absolute;
				width: 100%;
				height: 2px;
				top: 50%;
				background-color: @background-color-6;
			}
		}

		/deep/ .ui-slider-handle {
			margin-top: 2px;
			cursor: pointer;
			z-index: 2;
			border-radius: 50%;
			background: white;
			height: 10px !important; /* 3rd party component is using important */
			width: 10px !important; /* 3rd party component is using important */
		}

		/deep/ .ui-slider-handle-active {
			z-index: 1;
		}

		/deep/ .ui-slider-range {
			z-index: 0;
			background: @application-primary-color;

		}

		/deep/ .ui-slider-horizontal .ui-slider-range {
			height: 2px;
			top: 50%;
			padding: 0;
			box-shadow: none;
			z-index: 1;
		}
	}

	.slider-wrapper {
		display: flex;

		.left-side {
			flex: 1;
			margin-left: 20px;
		}

		ansyn-filter-counter {
			align-self: flex-end;
		}

	}
}
