/* menus */

#topbar {
  background-color: var(--ocf-dark);

  .logo {
    height: 3rem;
    padding: 0 1rem;
    margin-left: -1rem;

    img {
      height: 100%;
    }
  }

  a {
    display: block;
    padding: 0.5rem;
    transition: all var(--page-transition_duration) ease;
    color: var(--ocf-light);

    &:hover {
      color: var(--ocf-primary);
    }
    &:active {
      color: var(--ocf-white);
    }
  }

  ul.page__menu--horizontal {
    padding: 0;
    list-style: none;

    & > li {
      display: block;
      position: relative;

      /* & > a {
        &:hover {
          color: var(--ocf-light);
        }
        &.active {
          color: var(--ocf-white);
        }
      } */
    }
  }

  button#topbar__button--toggleSidebar {
    display: none;
    padding: 0;
    color: var(--ocf-primary);
    font-size: 1.5rem;
  }
}

@media only screen and (width < 960px) {
  #topbar {
    .logo {
      height: 2rem;
    }
    ul.page__menu--horizontal {
      display: none;
    }
    button#topbar__button--toggleSidebar {
      display: initial;
    }
  }
}