@import '~open-color/open-color.scss';

.nav-bar__nav {
  height: 40px;
  border-bottom: 1px solid $oc-gray-2;
  display: flex;
  background-color: $oc-gray-7;
}

.nav-bar__header {
  color: $oc-gray-2;
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  background-color: $oc-gray-8;
}

.nav-bar__item {
  color: $oc-gray-2;
  text-decoration: none;
  width: 100px;
  transition: all 0.1s linear;
  text-align: center;
  line-height: 40px;

  &:hover {
    color: $oc-gray-3;
    border-bottom: 2px solid $oc-indigo-5;
  }
}

.nav-bar__item--active {
  color: $oc-gray-3;
  border-bottom: 2px solid $oc-indigo-5;
}