@bottomBar_height: 80px;
@bottomBar_iconSize: 24px;

.bottomBar {
	position: sticky;
	z-index: 9999;
	
	left: 0;
	bottom: 0;

	width: 100vw;
	min-width: 100vw;
	max-width: 100vw;
	
	overflow: hidden;

	display: flex;
	flex-direction: row;

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

	background-color: var(--background-color-accent);
	border-radius: 12px 12px 0 0;

	height: @bottomBar_height;

	padding: 10px;

	.items {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		//white-space: nowrap;
		//overflow-x: overlay;

		height: 100%;
		width: 100vw;

		.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: 100%;
				width: fit-content;

				display: flex;
				flex-direction: column;

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

				color: var(--background-color-contrast);
				font-size: 2rem;
				
				padding: 12px;
				transition: all 70ms ease-in-out;

				svg{
					margin: 0!important;
				}
			}

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

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