@import "./theme";

.mfunsPlayer-bar-wrap {
	z-index: 5;
	width: calc(100% - 30px);
	height: 4px;
	padding: 7px 0;
	position: absolute;
	top: 0;
	display: flex;
	align-items: center;
	cursor: pointer;
	box-sizing: border-box;
	// &:hover {
	// 	height: 5px;
	// 	.mfunsPlayer-bar {
	// 		height: 5px;
	// 	}
	// 	.mfunsPlayer-thumb {
	// 		width: 14px;
	// 		height: 14px;
	// 	}
	// }
	.mfunsPlayer-bar {
		width: 100%;
		height: 4px;
		background: hsla(0, 0%, 100%, 0.4);
		position: relative;
	}
	.mfunsPlayer-bar-preview {
		position: absolute;
		background: #fff;
		pointer-events: none;
		display: none;
		background-size: 8000px 100%;
		bottom: 13px;
	}
	.mfunsPlayer-bar-preview-canvas {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
		pointer-events: none;
	}
	.mfunsPlayer-barTime {
		position: absolute;
		top: -30px;
		border-radius: $theme-border-radius;
		padding: 4px 6px;
		background-color: rgba(0, 0, 0, 0.62);
		color: #fff;
		font-size: 12px;
		text-align: center;
		opacity: 1;
		/* transition: opacity .1s ease-in-out; */
		word-wrap: normal;
		word-break: normal;
		z-index: 2;
		pointer-events: none;

		&.hidden {
			opacity: 0;
		}
		&.thumbLimit {
			&::after {
				display: none;
			}
		}
	}
	.mfunsPlayer-bar-mark {
		position: absolute;
		top: -10px;
		&.hidden {
			opacity: 0;
		}
		&::after {
			content: "";
			display: block;
			position: absolute;
			bottom: -12px;
			left: 50%;
			transform: translateX(-50%);
			border: 5px solid;
			border-color: $theme-color transparent transparent transparent;
		}
	}
	.mfunsPlayer-thumb {
		width: 11px;
		height: 11px;
		background: url(../icon/thumb.png);
		// background: #00a1d6;
		border-radius: 50%;
		background-size: 100% 100%;
		position: absolute;
		top: -4px;
		right: 5px;
		margin-right: -12px;
		transition: all 0.3s ease-in-out;
		transform: scale(1);
		cursor: pointer;
		z-index: 8;
		&.hidden {
			transform: scale(0);
		}
	}
	.mfunsPlayer-bufferedBar {
		position: absolute;
		left: 0;
		top: 0;
		background: hsla(0, 0%, 100%, 0.4);
		width: 0;
		height: 100%;
	}
	.mfunsPlayer-playedBar {
		position: absolute;
		left: 0;
		top: 0;
		background: $theme-color-dark;
		width: 0;
		height: 100%;
	}
	.mfunsPlayer-preview {
		position: absolute;
	}
}