.footer {
	position: relative;
	height: var(--footer-sm-height);
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 0.25rem;
	z-index: 3;
	bottom: 0;
	background-color: var(--footer-primary);
	overflow: hidden;
	border-top: 5px solid var(--footer-secondary);
	box-sizing: content-box;
}

.footer-ios {
	height: var(--footer-ios-height);
	padding: 0 10px 15px 10px;
}

.footer-nav {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	height: 100%;
}

@keyframes ripple-effect {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

.ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: ripple-effect 600ms linear;
	background-color: rgba(255, 255, 255, 0.3);
	pointer-events: none;
}

.footer-button {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	border: none;
	background: transparent;
	color: var(--alt-font-color, white);
	cursor: pointer;
	font-family: var(--app-font-family);
	font-weight: 500;
	transition: background-color 0.15s;
	width: 75px;

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 70%;
		height: 3px;
		background: white;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 0.25s ease;
		border-radius: 2px;
	}
}

.footer-button:hover {
	background-color: var(--hover-color);
}

.footer-button--active {
	&::after {
		transform: scaleX(1);
	}
}

.footer-button-title {
	font-size: 10px;
}

.footer-overflow-button {
	width: 100%;
	height: 100%;
	border: none;
	background: transparent;
	color: var(--alt-font-color, white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-overflow-button:hover {
	background-color: var(--hover-color);
}

@media screen and (min-width: 900px) {
	.footer {
		height: var(--footer-lg-height);
		padding: 2px;
		border-top: 8px solid var(--footer-secondary);
		box-shadow: rgba(99, 99, 99, 0.2) 0px -2px 4px 0px;
	}

	.footer-button {
		width: 140px;
	}

	.footer-button-title {
		font-size: 14px;
	}
}