@import '../../../../css/constants';

.fixed-cropper-slider {
	width: 100%;
	height: 20px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	border-radius: 5px;
	cursor: pointer;

	&__wrapper {
		display: flex;
		align-items: center;
		max-width: 400px;
		width: 100%;
	}

	&__line {
		background: rgba(white, 0.4);
		height: 2px;
		width: 100%;
		border-radius: 5px;
		display: flex;
		position: relative;
		align-items: center;
	}

	&__fill {
		background: $theme-color;
		align-self: stretch;
		flex-basis: auto;
		flex-direction: column;
		flex-shrink: 0;
	}

	&__circle {
		width: 30px;
		height: 30px;
		margin-left: -15px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		transition-duration: 0.2s;
		transition-property: background-color, box-shadow;
		background-color: transparent;

		&:hover {
			background-color: rgba($theme-color, 0.1);
		}

		&--focus {
			background-color: rgba($theme-color, 0.2);
		}
	}

	&__inner-circle {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: $theme-color;
		transform: scale(1);
		transition-duration: 0.1s;
		transition-property: transform;
		box-shadow: rgba($theme-color, 0.2) 0px 0px 7px, rgba($theme-color, 0.15) 0px 1px 3px 1px;

		&--focus {
			transform: scale(1.2);
		}
	}
}
