@import "/UI/Styles/Theme.scss";

.nav-button
{
	position: relative;
	width: 70px;
	height: 86px;
	border-radius: 100%;
	flex-shrink: 0;
	flex-grow: 0;
	overflow: visible;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;

	&.orange .nav-icon { color: $accent-orange; }
	&.green .nav-icon { color: $accent-green; }
	&.blue .nav-icon { color: $accent-blue; }
	&.gray .nav-icon { color: $accent-gray; }

	.nav-button-circle
	{
		position: relative;
		width: 60px;
		height: 60px;
		border-radius: 100%;
		flex-shrink: 0;
		flex-grow: 0;
		overflow: visible;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
	}

	.nav-selection-ring
	{
		position: absolute;
		width: 80px;
		height: 80px;
		border-radius: 100%;
		overflow: visible;
		pointer-events: none;
		z-index: 0;
	}

	.nav-icon
	{
		position: relative;
		width: 60px;
		height: 60px;
		flex-shrink: 0;
		flex-grow: 0;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
		overflow: visible;
		pointer-events: none;
		z-index: 1;
		font-size: 36px;
		font-weight: 500;
		text-align: center;
	}

	.nav-button-label
	{
		position: absolute;
		left: -35px;
		top: 92px;
		width: 140px;
		height: 22px;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 600;
		line-height: 20px;
		color: #28aefe;
		text-align: center;
		white-space: nowrap;
		text-shadow: 0 2px 8px rgba( 0, 0, 0, 0.5 );
		z-index: 2;
	}
}