comty/packages/app/src/layouts/components/bottomBar/index.less

@import "@styles/vars.less";
@import "@styles/animations.less";

.quick-nav {
	position: absolute;

	box-sizing: border-box;

	bottom: var(--bottom-bar-height);
	left: 0;
	right: 0;

	z-index: 500;

	display: flex;

	flex-direction: row;

	align-items: center;
	justify-content: space-evenly;

	width: 100%;
	height: 0;
	opacity: 0;

	background-color: var(--background-color-primary);

	box-shadow: @card-shadow-top;

	transform: translateY(10px);
	padding-bottom: 20px;

	gap: 20px;

	pointer-events: none;

	transition: all 150ms ease-in-out;

	border-radius: 12px 12px 0 0;

	&.active {
		pointer-events: all;

		height: 100px;

		opacity: 1;
	}

	.quick-nav_item {
		position: relative;

		display: flex;
		flex-direction: column;

		align-items: center;
		justify-content: center;

		z-index: 500;

		width: 20vw;
		height: 100%;
		//padding: 0 30px;

		transition: all 150ms ease-in-out;

		color: var(--text-color);

		h1 {
			margin: 0;

			font-size: 0px;

			transition: all 150ms ease-in-out;
		}

		svg {
			margin: 0 !important;
			transition: all 150ms ease-in-out;
			font-size: 2rem;
		}

		&.disabled {
			pointer-events: none;

			h1 {
				font-size: 0px;
			}

			svg {
				font-size: 2rem;
				color: var(--disabled-color);
			}

			color: var(--disabled-color);
		}

		&.hover {
			h1 {
				font-size: 1rem;
			}

			svg {
				font-size: 2.2rem;
				color: var(--colorPrimary);
			}

			color: var(--colorPrimary);
		}
	}
}

.player_btn {
	color: var(--color);

	background-color: var(--average-color);

	padding: 10px 20px;

	border-radius: 8px;

	&.bounce {
		svg {
			animation: bounce 1s infinite;
		}
	}

	svg {
		color: var(--color);
		margin: 0;
	}
}

.bottomBar_wrapper {
	//position: absolute;
	position: relative;

	bottom: 0;
	left: 0;

	z-index: 550;

	display: flex;
	flex-direction: row;

	align-items: center;
	justify-content: center;

	width: 100vw;

	//padding: 10px;
}

.bottomBar {
	display: flex;
	flex-direction: row;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: var(--bottom-bar-height);

	overflow: hidden;

	background-color: var(--background-color-accent);

	//border-radius: 12px;
	border-radius: 12px 12px 0 0;

	//box-shadow: @card-shadow;
	box-shadow: @card-shadow-top;

	.items {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		height: 100%;
		width: 100%;

		.item {
			display: inline-flex;

			height: 100%;
			align-items: center;
			justify-content: center;

			transition: all 150ms ease-in;

			width: 20vw;

			min-width: 20vw;
			max-width: 20vw;

			.icon {
				border-radius: 360px;

				height: @bottomBar_iconSize;
				width: @bottomBar_iconSize;

				display: flex;
				flex-direction: column;

				align-items: center;
				justify-content: center;

				color: var(--background-color-contrast);
				font-size: 1.5rem;

				padding: 7px;
				transition: all 70ms ease-in-out;

				svg {
					margin: 0 !important;
				}
			}

			&.primary {
				.icon {
					color: var(--background-color-primary);
					background-color: var(--colorPrimary);
				}
			}
		}

		.item:active {
			.icon {
				background-color: var(--background-color-primary);
				color: var(--background-color-contrast);
				transform: scale(0.9);
			}
		}
	}
}