/* ==============================================================
   Widget Chronology
   style declarations for widget_chronology.xhtml
   ==============================================================*/
/* WIDGET CHRONOLOGY */

/* BLOCK */
.widget-chronology-slider {
	&__topbar {
		background-color: @ci-color1;
	}
	&__item {
		&-input {
			color: @fg-content-box;
		}
		&.chronology-slider-label,
		&.chronology-slider-actions {
	    	color: @white;
		}
		&.chronology-slider-label {
			font-weight: 400;
	    	font-size: @fontNormal;
		}
		&.chronology-slider-actions {
			ul {}
			li {}
			img {}
			[data-reset="chrono-slider"] {
				color: @white;
			}
		}
		&.chronology-slider-action-loader,
		&.chronology-slider-action-reset {
			&.active {}
		}
		&.chronology-slider-action-loader {}
		&.chronology-slider-action-reset {}
		&.chronology-slider-start,
		&.chronology-slider-end {
			font-size: @fontMedium;
			background-color: @bg-content-box;
		}
		&.chronology-slider-start {
		}
		&.chronology-slider-end {
		}
		&.chronology-slider {
			background-color: @bg-content-box;
		}
	}
}

.chronology-slider {
	.widget-chronology-slider__slider {
	}
	&__input-wrapper {
		input {
		}
	}
	&__input-start,
	&__input-end {
	}
	&__input-start {}
	&__input-end {}
	&__ok-button {
	}
	&__between-year-symbol {
	}
	&__graph {
		&-line {  
		}
		&-area {
		}
		&-range {
		}
	}
}

@{RTL} .widget-chronology-slider {
	&__item {
		&.chronology-slider-start {
			text-align: right;
			padding-left: unset;
		}
		&.chronology-slider-end {
			text-align: left;
			padding-right: unset;
		}
	}
}

#chronoSlider {
	.ui-slider-range,
	.ui-slider-handle {
        &:focus {}
	}
	.ui-slider-range {
		background-color: @ci-color1;
	}
	.ui-slider-handle {
		width: 1rem;
		height: 1rem;
		border: 1px solid @middleblack;
	}
}

/* BREAKPOINT FOR LARGE DESKTOPS */
@media screen and (max-width: @largeBreakpoint) {}

/* BREAKPOINT FOR DESKTOPS */
@media screen and (max-width: @mediumBreakpoint) {}

/* BREAKPOINT FOR TABLETS */
@media screen and (max-width: @smallBreakpoint) {}

/* BREAKPOINT FOR SMARTPHONES */
@media screen and (max-width: @xSmallBreakpoint) {}
