src/static/scripts/components/misc/controlsBar/_controlsBar.scss
@use "../../../../style/vars";

.controls {
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: vars.$controls-height;
	background-color: vars.$controls-bg;
	user-select: none;
	transform: translateY(101%);
	transition: all .25s ease;

	.caption *, .textOnly:not(a) {
		color: vars.$controls-color;
	}

	img.padded {
		padding: 10%;
	}

	.slot {
		display: flex;
	}

	.textOnly {
		line-height: vars.$controls-height;
		margin: 0 .125rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.smaller, .smaller > img {
		height: 1.6rem;
	}

	.evenSmaller, .evenSmaller > img {
		height: 1.75rem;
	}

	> .slot > .loadingIcon {
		height: 2.5rem;
		margin: 0 .25rem;
	}

	a {
		color: vars.$controls-link-color;
	}

	> .progressBar {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: .25rem;
		cursor: pointer;

		&:hover, &.isDragging {
			background: vars.$primary-transparent;
			transform: scaleY(vars.$progress-bar-hover-scale);

			.accessibilitySpacer {
				transform: scaleY(2);
			}
		}

		> .progress {
			transition: width .1s linear;
			border-right: .25rem solid vars.$progress-bar-tip;
		}
	}

	&, > .slot {
		> button, > * > button {
			display: flex;

			> :is(img, svg), > .imgWrapper > :is(img, svg) {
				height: 2.5rem;
				width: 2.5rem;
				transition: filter .25s ease;
			}

			&:hover {
				> :is(img, svg), > .imgWrapper > :is(img, svg) {
					filter: drop-shadow(0px 0px 3px vars.$primary) drop-shadow(0px 0px 0px vars.$primary);
				}
			}

			&:active {
				> :is(img, svg), > .imgWrapper > :is(img, svg) {
					filter: drop-shadow(0px 0px 3px vars.$primary) drop-shadow(0px 0px 7px vars.$primary);
				}
			}
		}
	}

}

.controlsVisible > .controls {
	transform: translateY(1px);
}