@import "variables";
@import "../../vendor/bootstrap/scss/bootstrap-grid";

#header {
  padding-top: 20px;
  padding-bottom: 20px;
  flex: 0 0 auto;

  #title {
    margin-bottom: $space-size-extra-small;
  }

  #logo {
    max-width: 100%;
    height: auto;
  }
}


#main-menu {
  @include media-breakpoint-down(md) {
    .navbar-brand {
      margin-left: 1rem;
    }

    .nav-item > .nav-link {
      margin-left: 1rem;
    }
  }

  // Fix for bootstrap for changing the toggler icon color
  .navbar-toggler > .navbar-toggler-icon {
    background-image: none;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#000' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") no-repeat 100% 100%;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#000' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") no-repeat 100% 100%;
  }
}