@charset "UTF-8";

//
// @copyright        2020 opencart.cn - All Rights Reserved
// @link             http://www.guangdawangluo.com
// @author           Sam Chen <sam.chen@opencart.cn>
// @created          2021-08-24 14:38:09
// @modified         2021-08-24 15:07:05
//

.header-wrap {
  background-color: #fff;
  height: 54px;
  // border-bottom: 1px solid #f1f1f1;
  position: relative;
  display: flex;
  align-items: center;
  z-index: 9;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .05);

  .header-left {
    width: 190px;
    display: flex;
    align-items: center; // flex-start | center
    justify-content: center; // flex-end | center | space-between
    // flex-wrap: wrap;

    .logo {
      max-width: 76%;
      max-height: 30px;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;

    > .navbar {
      margin-bottom: 0;
      padding: 0;
      list-style: none;
      > li {
        padding: 0 1rem;
        @media screen and (max-width: 991px) {
          padding: 0 .3rem;
        }

        .dropdown {
          &:hover {
            .nav-link {
              background-color: #eee;
            }

            .dropdown-menu {
              display: block;
              &.dropdown-menu-end {
                right: 0;
                left: auto;
              }
            }
          }
        }

        a.nav-link {
          color: #333;
          padding: 0 6px;
          height: 54px;
          display: flex;
          align-items: center;

          &.show {
            background-color: #eee;
          }
        }
      }
    }

    .navbar {
      &.navbar-left {
        li {
          a.nav-link {
            position: relative;

            &:after {
              content: '';
              position: absolute;
              left: 0;
              display: none;
              bottom: 0;
              width: 100%;
              height: 3px;
              background-color: $primary;
            }
          }

          &.active, &:hover {
            font-weight: bold;

            a {
              &:after {
                display: block;
              }
            }
          }
        }
      }

      &.navbar-right {
        > li {
          padding: 0 .5rem;

          a.nav-link {
            padding: 0 10px;
          }
        }
      }
    }
  }

  .avatar {
    height: 36px;
    margin-bottom: -15px;
    margin-top: -15px;
    width: 36px;
  }
}