@import "../../../../js-webshim/dev/shims/styles/scss/_extends";
@import "../../../../js-webshim/dev/shims/styles/scss/_api-shim";
@import "../../../../js-webshim/dev/shims/styles/scss/_api-forms-ext";
@import "../../../../js-webshim/dev/shims/jme/icons";

.ws-po-box {
	border-radius: em(4);
	box-shadow: 0 0 2px rgba(0, 0, 0, .3);
}

progress.ws-style {
	@include progress {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
		border-radius: 4px;
	}

	@include progressbar {
		box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15) inset;
	}
}

.ws-popover-opener {
	border-radius: 3px;
}

.ws-range {
	border-radius: em(5);
	box-shadow: 0 em(-1) em(1.5) rgba(0, 0, 0, 0.2) inset;

	.ws-range-thumb {
		margin: em((22 - 8) / -2) 0 0 em(22 / -2);
		height: em(22);
		width: em(22);
		border-radius: 50%;

		> span {
			bottom: em(22 + 1);

			> span {
				&:after,
				&:before {
					border-radius: em(4);
				}
			}
		}
	}

	&.ws-active .ws-range-thumb {
		box-shadow: 0 0 em(9) rgba(0, 75, 100, 0.2);
	}

	.ws-range-progress {
		border-radius: em(5);
		box-shadow: 0 em(1.5) em(3.5) rgba(255, 255, 255, 0.2) inset;
	}
}

.ws-button-row > button {
	border-radius: 5px;
	box-shadow: 1px 1px 0 #fff;
}

.input-picker button  {
	border-radius: em(5);
}

.mediaplayer {
	.buffer-progress,
	.buffer-progress-indicator,
	.media-range {
		border-radius: em(3);
	}

	.ws-range-progress {
		border-radius: em(3) 0 0 em(3);
	}

	.time-select {
		border-radius: em(2);
	}

	.ws-range-thumb {
		border-radius: 50%;
		width: em(11);
		height: em(11);
	}

	.time-slider {

		.ws-range-thumb {
			width: em(16);
			height: em(11);
			border-radius: em(3);
		}
	}
}
