Kadence Slide-in Kontaktlink Hook

HTML

<div class="kontaktnavi-wrapper">
  <span class="tel-wrapper">
    <a href="tel:+41795616594" class="kontaktnavi-link telefon">
    <svg style="height: 20px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
    </svg>079 561 65 94</a>
  </span>
  <span class="email-wrapper">
    <a href="mailto:info@fussundsein.ch" class="kontaktnavi-link email">
    <svg style="height: 20px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
      <polyline points="22,6 12,13 2,6"></polyline>
    </svg>
    E-Mail senden</a>
  </span>
</div>

CSS

.kontaktnavi-wrapper {
    position: fixed;
    right: 0px;
    background-color: transparent;
    width: 260px;
    right: -220px;
    top: 30%;
    z-index: 10;
}

.tel-wrapper,
.email-wrapper {
    display: flex !important;
    align-items: center;
    background-color: #aecb00;
    color: #FFFFFF;
    text-decoration: none !important;
    height: 44px;
    width: 100%;
    border-radius: 44px;
    transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    -fox-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    position: relative;
    font-size: 1.125rem !important;
    line-height: 44px;
    vertical-align: middle;
    z-index: 10;
    text-align: left;
    right: 0px;
    margin-bottom: 10px;
}

.tel-wrapper:hover,
.email-wrapper:hover,
.tel-wrapper:focus-visible,
.email-wrapper:focus-visible {
    right: 160px;
    background-color: #d1da5b;
    color: white !important;
}

.tel-wrapper a,
.email-wrapper a {
    padding-left: 12px !important;
    color: white !important;
    text-decoration: none !important;
}

.tel-wrapper svg,
.email-wrapper svg {
    margin-right: 12px !important;
    top: 4px !important;
    position: relative !important;
}

@media (max-width: 500px) {
.kontaktnavi-wrapper {
    top: 65%;
}
}