// Rewrite navbar
.navbar
  background-color transparent
  font-size 0.875rem
  box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
  -webkit-box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)

  .navbar-brand
    color var(--navbar-text-color)

  .navbar-toggler .animated-icon span
    background-color var(--navbar-text-color)

  .nav-item .nav-link
    display block
    color var(--navbar-text-color)
    transition color .2s ease-in-out, background-color .2s ease-in-out

    &:hover
      color var(--link-hover-color)

    &:focus
      color var(--navbar-text-color)

    i
      font-size 0.875rem
      line-height inherit

    i:only-child
      margin 0 .2rem

  .navbar-toggler
    border-width 0
    outline 0

  &.scrolling-navbar
    will-change background, padding
    -webkit-transition background 0.5s ease-in-out, padding 0.5s ease-in-out
    transition background 0.5s ease-in-out, padding 0.5s ease-in-out

    @media (min-width: 600px)
      &
        padding-top 12px
        padding-bottom 12px

      & .navbar-nav > li
        -webkit-transition-duration 1s
        transition-duration 1s

    &.top-nav-collapse
      padding-top 5px
      padding-bottom 5px

  .dropdown-menu
    font-size 0.875rem
    color var(--navbar-text-color)
    background-color rgba(0, 0, 0, 0.3)
    border none
    min-width 8rem
    -webkit-transition background .5s ease-in-out,padding .5s ease-in-out
    transition background .5s ease-in-out,padding .5s ease-in-out

    @media (max-width: 991.98px)
      text-align center

  .dropdown-item
    color var(--navbar-text-color)

    &:hover, &:focus
      color var(--link-hover-color)
      background-color rgba(0, 0, 0, 0.1)

  @media (min-width: 992px)
    .dropdown:hover > .dropdown-menu
      display block

    .dropdown > .dropdown-toggle:active
      pointer-events none

    .dropdown-menu
      top 95%

  .animated-icon
    width 30px
    height 20px
    position relative
    margin 0
    -webkit-transform rotate(0deg)
    -moz-transform rotate(0deg)
    -o-transform rotate(0deg)
    transform rotate(0deg)
    -webkit-transition .5s ease-in-out
    -moz-transition .5s ease-in-out
    -o-transition .5s ease-in-out
    transition .5s ease-in-out
    cursor pointer

    span
      display block
      position absolute
      height 3px
      width 100%
      border-radius 9px
      opacity 1
      left 0
      -webkit-transform rotate(0deg)
      -moz-transform rotate(0deg)
      -o-transform rotate(0deg)
      transform rotate(0deg)
      -webkit-transition .25s ease-in-out
      -moz-transition .25s ease-in-out
      -o-transition .25s ease-in-out
      transition .25s ease-in-out
      background #ffffff

      &:nth-child(1)
        top 0

      &:nth-child(2)
        top 10px

      &:nth-child(3)
        top 20px

    &.open
      span
        &:nth-child(1)
          top 11px
          -webkit-transform rotate(135deg)
          -moz-transform rotate(135deg)
          -o-transform rotate(135deg)
          transform rotate(135deg)

        &:nth-child(2)
          opacity 0
          left -60px

        &:nth-child(3)
          top 11px
          -webkit-transform rotate(-135deg)
          -moz-transform rotate(-135deg)
          -o-transform rotate(-135deg)
          transform rotate(-135deg)

.navbar .dropdown-collapse, .top-nav-collapse, .navbar-col-show
  if $navbar-glass-enable
    ground-glass($navbar-glass-px, $navbar-bg-color, $navbar-glass-alpha)
  else
    background-color var(--navbar-bg-color)

@media (max-width: 767px)
  .navbar
    font-size 1rem
    line-height 2.5rem

.banner-text
  color var(--subtitle-color)
  max-width calc(960px - 6rem)
  width 80%
  overflow-wrap break-word

  .typed-cursor
    margin 0 .2rem

@media (max-width: 767px)
  #subtitle, .typed-cursor
    font-size 1.5rem

@media (max-width: 575px)
  .banner-text
    font-size 0.9rem

  #subtitle, .typed-cursor
    font-size 1.35rem
