@import "../../../lib/style/base";

$navbar-octo-size: var(--navbar-octo-size, var(--nav-height));

:host {
	position: relative;
	--nav-padding: 0 #{$navbar-octo-size} 0 #{$spacing-m};
}

#logo-wrapper {
	display: flex;
	align-items: center;
	cursor: pointer;
	outline: none;

	#logo {
		margin: 0 8px 0 0;
		height: #{size(35)};
		width: #{size(35)};
		transform-origin: center center;
		fill: color("primary");
	}

	#text {
		height: #{size(15)};

		@media #{$screen-s-and-down} {
			display: none;
		}
	}

	&:hover {
		#logo {
			$deg: 360 * -10;
			transform: rotate(#{$deg}deg);
		}
	}
}

#menu-button {
	@include color-variables("primary", $palette-grey);
	display: none;
}

@media #{$screen-s-and-down} {
	#menu-button {
		display: inline-flex;
	}
}

#theme-selector {
	background: #{color("primary")};
	border-radius: 100%;
	cursor: pointer;
	width: #{size(40)};
	height: #{size(40)};
}

#dark-mode {
	--button-fab-size: #{size(40)};
	margin: 0 $spacing-m 0 0;
}

#navigation {
	display: flex;

	.link {
		color: #{color("shade", 400)};
		font-weight: $font-weight-regular;
		margin: 0 $spacing-l 0 0;
		border-bottom: #{size(2)} solid transparent;

		&[active] {
			color: #{color("primary")};
			border-color: currentColor;
		}

		&:not([active]) {
			cursor: pointer;
		}
	}

	@media #{$screen-s-and-down} {
		display: none;
	}
}

#octo {
	--octo-size: #{$navbar-octo-size};
	position: absolute;
	top: 0;
	right: 0;
}
