@use 'src/app/shared/styles/_variables.color'as colors;

:host {
  padding: 0 90px 0 90px;
  margin: 10px 0 60px 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
  background-color: colors.$inklets-color-fg;
}

li a {
  color: colors.$inklets-color-white;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.activeRoute {
  background-color: colors.$inklets-color-highlight-bg;
}

li a:hover {
  background-color: colors.$inklets-color-highlight-fg;
  color: colors.$inklets-color-black;
}