.widget-contacts {
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 10;
}

.widget-contacts__basket {
  position: relative;
  width: 103px;
  height: 62px;
  cursor: pointer;
}

.widget-contacts_basket--back {
  width: 90px;
  height: 80px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #212121;
  border-radius: 8px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.widget-contacts_basket--front {
  width: 103px;
  height: 62px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background:
    linear-gradient(-45deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.08) 25%,
      rgba(255, 255, 255, 0.02) 50%,
      rgba(255, 255, 255, 0.10) 100%),
    rgba(43, 43, 43, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    inset 0 -1px 2px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(3px) saturate(160%) contrast(120%);
  -webkit-backdrop-filter: blur(3px) saturate(160%) contrast(120%);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.4341 62.2222C8.37141 62.2222 4.97202 59.1389 4.5768 55.0955L0.0381596 8.66276C-0.415535 4.02121 3.23178 0 7.89545 0H47.8256C49.7534 0 51.6146 0.705373 53.0582 1.98309L63.8529 11.5378C65.2965 12.8155 67.1577 13.5209 69.0855 13.5209H93.64C98.2887 13.5209 101.931 17.5174 101.501 22.1462L98.4422 55.0581C98.0649 59.1177 94.6584 62.2222 90.5813 62.2222H12.4341Z" fill="white"/></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.4341 62.2222C8.37141 62.2222 4.97202 59.1389 4.5768 55.0955L0.0381596 8.66276C-0.415535 4.02121 3.23178 0 7.89545 0H47.8256C49.7534 0 51.6146 0.705373 53.0582 1.98309L63.8529 11.5378C65.2965 12.8155 67.1577 13.5209 69.0855 13.5209H93.64C98.2887 13.5209 101.931 17.5174 101.501 22.1462L98.4422 55.0581C98.0649 59.1177 94.6584 62.2222 90.5813 62.2222H12.4341Z" fill="white"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  z-index: 4;
  overflow: hidden;
}

.widget-contacts__social {
  width: 50px;
  height: 50px;
  position: absolute;
  background: #E9E9E9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  pointer-events: none;
  will-change: transform;
  transition: all 0.3s ease;
}

.widget-contacts__basket.open .widget-contacts__social {
  left: 50%;
  transform: rotate(0) translateX(-50%);
  pointer-events: auto;
}

.widget-contacts__basket.open .widget-contacts__social:hover {
  transform: rotate(0) translateX(-50%) scale(1.1);
}

.widget-contacts__social--tg {
  left: 7px;
  bottom: 30px;
  transform: rotate(-11deg);
  z-index: 3;
}

.widget-contacts__basket.open .widget-contacts__social--tg {
  bottom: 70px;
}

.widget-contacts__social--max {
  right: 8px;
  bottom: 15px;
  transform: rotate(5deg);
  z-index: 2;
}

.widget-contacts__basket.open .widget-contacts__social--max {
  bottom: 130px;
}

@media (max-width: 768px) {
  .widget-contacts {
    right: 25px;
    bottom: 25px;
  }

  .widget-contacts__basket {
    width: 90px;
    height: 55px;
  }

  .widget-contacts_basket--back {
    width: 80px;
    height: 70px;
    border-radius: 7px;
  }

  .widget-contacts_basket--front {
    width: 90px;
    height: 55px;
    border-radius: 7px;
  }

  .widget-contacts__social {
    width: 44px;
    height: 44px;
  }

  .widget-contacts__social svg {
    max-width: 90%;
    height: auto;
  }

  .widget-contacts__social--tg {
    bottom: 25px;
  }

  .widget-contacts__basket.open .widget-contacts__social--tg {
    bottom: 65px;
  }

  .widget-contacts__social--max {
    right: 10px;
  }

  .widget-contacts__basket.open .widget-contacts__social--max {
    bottom: 120px;
  }
}