@import "theme/vars.less";

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

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

	position: relative;

	left: 0;
	bottom: 0;

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

	height: @app_bottomBar_height;

	padding: 10px;
	overflow: hidden;

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

	.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: @app_bottomBar_iconSize;
				width: @app_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);
			}
		}
	}
}