.nav-bar {
  background    : var(--color-white-default);
  box-shadow    : 0 1px 3px rgba(0, 0, 0, 0.1);
  border-top    : 1px solid rgba(0, 0, 0, 0.1);
  border-bottom : 1px solid rgba(0, 0, 0, 0.1);
}

.nav-bar__container {
  position    : relative;
  display     : flex;
  align-items : center;
  gap         : 4px;
  margin      : 0 auto;
  padding     : 0 var(--container-primary-margin);
}

.nav-bar__phone {
  display         : flex;
  align-items     : center;
  gap             : 8px;
  margin-left     : auto;
  padding         : 12px 16px;
  font-size       : 1rem;
  font-weight     : 500;
  color           : var(--color-black-default);
  text-decoration : none;
  height          : stretch;
  border-left     : 1px solid rgba(0, 0, 0, 0.1);
  border-right    : 1px solid rgba(0, 0, 0, 0.1);
  transition      : background-color 0.2s ease;
}

.nav-bar__phone:hover {
  background-color : var(--color-grey-default);
}

.nav-bar__phone img {
  width  : 16px;
  height : 16px;
  color  : var(--color-primary);
}

@media (max-width : 1199px) {
  .nav-bar {
    display : none;
  }
}

@media (min-width : 1200px) {
  body[data-is-desktop="true"] .header-nav {
    background : transparent;
  }
}