const video-padding = 56.25%
const video-control-color = rgba(255, 255, 255, 0.75)

.video-container
	position relative
	width 100%
	min-height 100px
	padding-bottom video-padding
	border-radius ui-element-border-radius
	overflow hidden

	:hover
		.video-controls
			opacity 1

.video
	position absolute
	width 100%
	height 100%
	left 0
	top 0
	background-color black

.video-controls
	position absolute
	bottom 0
	right 0
	padding 0.5rem 0.75rem
	opacity 0
	width 100%
	horizontal
	align-items center
	default-transition

	:hover
		opacity 1 !important

.video-progress-container
	flex 1
	height 5px
	background rgba(255, 255, 255, 0.3)
	border-radius ui-element-border-radius
	transform translateZ(0)
	overflow hidden

.video-progress
	background white
	width 100%
	height 100%
	transform scaleX(0)
	transform-origin 0
	will-change transform

.video-time
	color video-control-color
	margin-left 0.5rem

.video-control
	background transparent !important
	color video-control-color
	border none
	line-height 1em
	height auto
	padding 0
	margin-left 0.5rem

	:hover
		color white

::-webkit-media-controls
	display none !important