@keyframes rotate {
  0%, 90% {
    transform-origin: -16px 0;
    transform: scale(1);
  }
  95% {
    transform-origin: -16px 0;
    transform: scaleX(0);
  }
  100% {
    transform-origin: -16px 0;
    transform: scaleX(1);
  }
}

@keyframes mailOpen {
  0%, 50% {
    top: calc(37px / 2 - 32px / 2);
  }
  100% {
    top: calc(37px / 2 - 32px / 2 + 37px + 5px);
  }
}

@keyframes callOpen {
  0% {
    top: calc(37px / 2 - 32px / 2);
  }
  50% {
    top: calc(37px / 2 - 32px / 2 + 37px + 5px);
  }
  100% {
    top: calc(37px / 2 - 32px / 2 + 37px * 2 + 5px * 2);
  }
}

.header {
  width: 90%;
  max-width: 500px;
  height: 37px;
  position: sticky;
  top: 0px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: center;
  background: #ffffff;
  border-bottom: 1px solid #e6e6e6;
  z-index: 2;
  margin: 0 auto;
  padding: 12px calc(10% / 2);
}

.header__button-menu {
  justify-self: flex-start;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.header__button-menu-img {
  width: 30px;
  height: 23px;
  margin: 0;
}

.header__button-menu-img:active {
  width: 28px;
  height: 21px;
}

.header__buttons {
  justify-self: flex-end;
  position: relative;
  margin: 0;
}

.header__buttons-contacts-animated {
  will-change: transform;
  animation: rotate 3000ms 150ms ease-in infinite;
}

.header__button {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: calc(37px / 2 - 32px / 2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  background: #000000;
  border: none;
  border-radius: 99em;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.header__button_disabled {
  display: none;
}

.header__button-whatsapp {
  right: 0;
  background: #0da300;
  z-index: 3;
}

.header__button-whatsapp-open {
  top: calc(37px / 2 - 32px / 2);
}

.header__button-mail {
  right: 0;
  background: #d366d1;
  z-index: 2;
}

.header__button-mail-open {
  top: calc(37px / 2 - 32px / 2 + 37px + 5px);
  animation: mailOpen .2s linear;
}

.header__button-call {
  right: 0;
  background: #000000;
  z-index: 1;
}

.header__button-call-open {
  top: calc(37px / 2 - 32px / 2 + 37px * 2 + 5px * 2);
  animation: callOpen .2s linear;
}

.header__button:active {
  width: 30px;
  height: 30px;
}

.header__button-img {
  width: 65%;
  height: 65%;
  margin: 0;
}

.header__button-shopping-cart {
  right: calc(32px + 15px);
  background: #009aeb;
}

.header__cart-count {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 22px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  border-radius: 50%;
  font-weight: bold;
  color: rgb(238, 228, 228);
  font-size: 18px;
  background: red;
}

.header__cart-count_empty {
  display: none;
}