diowa/icare

.main-navbar {
  @extend .navbar-light;
  @extend .bg-body-tertiary;
  @extend .navbar-expand-md;
  @extend .fixed-top;

  .navbar-toggler {
    border-color: transparent;
  }
}

.nav-link {
  &--profile {
    position: relative;
  }

  &__user-name {
    margin-left: 46px;
  }

  &__user-image {
    position: absolute;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: $border-radius-sm;
  }
}

.navbar-brand {
  font-family: Pacifico, $font-family-base; // stylelint-disable-line font-family-no-missing-generic-family-keyword
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25rem;

  > svg {
    position: relative;
    top: 4px;
    width: 38px;
    height: 15px;
    vertical-align: top;
  }
}

.navbar-toggle {
  .icon-bar {
    // same duration as bootstrap's collapse
    transition: all .35s ease-in-out;
    backface-visibility: hidden;
  }

  .icon-bar--top {
    transform: rotate3d(0, 0, 1, 45deg);
    transform-origin: 17% 200%;
  }

  .icon-bar--middle {
    transform: rotate3d(0, 1, 0, 90deg);
  }

  .icon-bar--bottom {
    transform: rotate3d(0, 0, 1, -45deg);
    transform-origin: 17% -100%;
  }

  &.collapsed {
    .icon-bar {
      transform: rotate3d(0, 0, 0, 0deg);
    }
  }
}