@import "~variables";

.subnavigation {

	padding: 0.5rem;
	background-color: rgba($color-black, 0.9);
	color: $color-white;
	text-align: center;

	@media (min-width: 600px) {
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	&__link {
		display: inline-block;
		color: rgba($color-white, 0.5);
		text-decoration: none;
		font-weight: bold;
		font-size: 0.9rem;
		padding: 0.1rem 0.5rem;
		border-radius: 3px;

		&:hover {
			color: $color-white;
      background-color: rgba($color-white, 0.1);
    }

    &.is-exact-active {
			color: $color-white;
      background-color: rgba($color-white, 0.2);
    }
	}

}