@import "../variable.scss";

#header {
  width: 100%;
  height: 72px; 
  padding: 0 40px;
  position: fixed;
  background-color: rgba(255, 255, 255, .95);
  box-shadow: 0 0 1px rgba(0,0,0,0.25);
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

  ul, li , ol {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  #logo {
    display: block;

    img {
      width: 110px;
      height: 60px;
    }
  }

  .navbar {
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  #mobile-nav {
    display: none;
    height: 72px;
    align-items: center;

    #logo {
      margin: 0 auto;
    }

    .btn-menu {
      position: absolute;
      left: 20px;
      top: 25px;
    }
  }

  .main-nav {
    display: flex;
    justify-content: space-between;

    & > ul {
      display: flex;
      justify-content: space-between;
      height: 72px;
      line-height: 72px;
    }

    li > a {
      font-size: 1.3em;
      color: $text-light-black;
    }
  }

  .links {
    & > li > a:hover {
      border-bottom: .2em solid $text-blue;
    }

    > li + li {
      margin-left: 30px;
    }
  }

  .info li {
    margin-left: 30px;
  }

  .tools {
    > li {
      margin-left: 30px;
      position: relative;
    }
    .search-form {
      width: 120px;
    }
  }

  .dropdown {
    .dropdown-menu {
      width: 200px;
      left: -60%;
      top: 98%;
      border: none;
      padding: 10px 0;

      a {
        font-size: 15px;
        padding: 5px 10px;
      }
    }
  }

  .select-lang {
    width: 90px;
  }

  .select-lang .dropdown-toggle {
    color: #00293D;
  }

  .select-lang .dropdown-menu {
    width: 105px;
    left: 0;
  }

  .caret {
    display: inline-block;
    margin-left: 2px;
    @include triangle-down($border-gray, 4px);
  }
}