@import '../abstract/_all';

.header-new {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  height: 50px;
  transition: all ease 0.3s;
  display: flex;
  align-items: center;
  font-size: 12px;
  mix-blend-mode: difference;
  background-blend-mode: difference;
  @media (min-width: $break-md) {
    padding-bottom: 0;
    height: 60px;
  }
  ul.list-clear li {
    margin: 0;
  }
  .interior svg path {
    fill: #212121;
  }
  .logo {
    width: 100%;
    max-width: 90px;
  }
  .logo svg {
    width: 100%;
  }
  @media (min-width: $break-md) {
    .logo {
      width: 100%;
      max-width: 180px;
    }
  }
  .menu-mobile {
    display: block;
  }
  @media (min-width: $break-lg) {
    .menu-mobile {
      display: none;
    }
  }
  .menu-desktop {
    display: none;
    white-space: nowrap;
  }
  @media (min-width: $break-lg) {
    .menu-desktop {
      display: flex;
    }
  }
  .search-bar {
    position: relative;
  }
  .search-bar::after {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    background-color: #fff;
    width: 100%;
    max-width: 250px;
    height: var(--line-width);
  }
}