@import 'lib/settings'

.mod-navigation
	.navball
		background: #555
		box-shadow: inset 0 .1em .8em #000, inset 0 1px 0 #000, 0 1px 0 #fff
		width: 13em
		height: 13em
		border-radius: 50%
		position: relative
		&::before
			content: ''
			display: block
			position: absolute
			width: 100%
			height: 100%
			border-radius: 50%
			top: 0
			top: 0
			background: radial-gradient(ellipse 150% 100% at 50% 5%, rgba(#fff, 0), rgba(#fff, .2) 50%, rgba(#fff, .0) 50%, rgba(#fff, .2))
		&::after
			content: ''
			display: block
			position: absolute
			width: 1em
			height: 1em
			top: 50%
			left: 50%
			transform: translate(-50%, -50%)
			border-radius: 50%
			border: 3px solid #f00
	.heading
		position: absolute
		bottom: -1px
		left: 50%
		transform: translate(-50%, 0)
		background: #ddd url('/img/noise.png')
		padding: ($quarter-gutter / 2) 0 0 0
		width: 5em
		text-align: center
		border-top-left-radius: 2em
		border-top-right-radius: 2em
		box-shadow: 0 -1px 0 rgba(#fff, 1)

@import 'lib/settings'

.mod-navigation
	.navball
		background: #555
		box-shadow: inset 0 .1em .8em #000, inset 0 1px 0 #000, 0 1px 0 #fff
		width: 13em
		height: 13em
		border-radius: 50%
		position: relative
		&::after
			content: ''
			display: block
			position: absolute
			width: 1em
			height: 1em
			top: 50%
			left: 50%
			transform: translate(-50%, -50%)
			border-radius: 50%
			border: 3px solid #f00
	.heading
		position: absolute
		bottom: -1px
		left: 50%
		transform: translate(-50%, 0)
		background: #ddd url('/img/noise.png')
		padding: ($quarter-gutter / 2) 0 0 0
		width: 5em
		text-align: center
		border-top-left-radius: 2em
		border-top-right-radius: 2em
		box-shadow: 0 -1px 0 rgba(#fff, 1)

Revert "Add subtle gloss on navball"
Revert "Add subtle gloss on navball"

This reverts commit 50bbde1f729d86be3f83177a2358e72edc96164e.
