.fzt-button-container {
    display: inline-block;
    position: relative;
    padding: 19px 32px;
    font-size: calc(var(--soriva-body-font-size) - 2px );
    border: 1px solid var(--soriva-primary-color);
    border-radius: 12px;
    font-weight: 600;
    line-height: 1;
    background: var(--soriva-primary-color);
    color: var(--soriva-teritary-color);
    text-transform: uppercase;
    overflow: hidden;
    -webkit-transition: var(--transition);
            transition: var(--transition);
    z-index: 0;
  }

  .fzt-button-container:before, .fzt-button-container:after {
    --skew: 0.2;
    background: var(--soriva-body-background-color);
    content: "";
    display: block;
    height: 102%;
    left: calc(-50% - 50%* var(--skew));
    pointer-events: none;
    position: absolute;
    top: -104%;
    transform: skew(calc(150deg* var(--skew))) translateY(var(--progress, 0));
    -webkit-transition: var(--transition);
    transition: var(--transition);
    width: 100%;
    z-index: -1;
}

.fzt-button-container:after {
  --progress: 0%;
  left: calc(50% + 50%* var(--skew));
  top: 102%;
}

.fzt-button-container a {
  color: currentColor;
  position: relative;
}

.fzt-button-container:hover:before {
  --progress: 100%;
}

.fzt-button-container:hover:after {
  --progress: -100%;
}
  
.fzt-button-container:hover {
  color: var(--soriva-primary-color);
}

.fzt-button-container a:before {
  --btn-animation-duration: 1.2s;
  position: absolute;
  content: "";
  background: inherit;
}

.fzt-button-container:hover a:before, .fzt-button-container:focus a:before {
  animation: chitchat linear both var(--btn-animation-duration);
}

@keyframes chitchat {
  0% {
    content: "#";
  }

  5% {
    content: ".";
  }

  10% {
    content: "^{";
  }

  15% {
    content: "-!";
  }

  20% {
    content: "#$_";
  }

  25% {
    content: "№:0";
  }

  30% {
    content: "#{+.";
  }
  
  35%{
    content: "@}-?";
  }

  40% {
    content: "?{4@%";
  }

  45% {
    content: "=.,^!";
  }

  50% {
    content: "?2@%";
  }

  55% {
    content: "\;1}]";
  }

  60% {
    content: "?{%:%";
    right: 0;
  }

  65% {
    content: "|{f[4";
    right: 0;
  }

  70% {
    content: "{4%0%";
    right: 0;
  }

  75% {
    content: "'1_0<";
    right: 0;
  }

  80% {
    content: "{0%";
    right: 0;
  }

  85% {
    content: "]>'";
    right: 0;
  }

  90% {
    content: "4";
    right: 0;
  }

  95% {
    content: "2";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}

/* Type 2 */

.fzt-button-container.type-2 a:hover {
  background: var(--soriva-primary-color);
  border-color: var(--soriva-primary-color);
  color: var(--soriva-light-color);
}

.fzt-button-container.type-2 a {
  background: transparent;
  color: var(--soriva-primary-color);
}

/* Type 3 */
  
  .fzt-button-container.type-3 a {
    display: inline-flex;
    align-items: center;
    color: var(--soriva-primary-color);
    border-width: 0 0 2px;
    border-style: solid;
    border-color: rgba(var(--soriva-primary-color-rgb), 0.2);
    background: transparent;
    font-size: var(--soriva-body-font-size);
    padding: 0;
    line-height: 1.2;
    position: relative;
    border-radius: 0;
    width: auto;
  }
  
  .fzt-button-container.type-3 a:before {
    background-color: currentColor;
    content: "";
    position: absolute;
    height: 2px;
    bottom: -2px;
    width: 0;
    margin: auto;
    left: 0;
  }
  
  .fzt-button-container.type-3 a:after {
    background-color: currentColor;
    content: "";
    position: absolute;
    height: 2px;
    bottom: -2px;
    width: 0;
    margin: auto;
    right: 0;
    -webkit-transition: width 1s cubic-bezier(0.9, -0.45, 0.30, 1.45);
    transition: width 1s cubic-bezier(0.9, -0.45, 0.30, 1.45);
  }
  
  .fzt-button-container.type-3 a:hover {
    color: var(--soriva-primary-color);
  }
  
  .fzt-button-container.type-3 a:hover:before {
    width: 100%;
    -webkit-transition: width 1s cubic-bezier(0.9, -0.45, 0.30, 1.45);
    transition: width 1s cubic-bezier(0.9, -0.45, 0.30, 1.45);
  }
  
  .fzt-button-container.type-3 a:hover:after {
    background: transparent;
    width: 100%;
  }

  /* Fzt With Gradient - Button */

  .fzt-with-gradient .fzt-button-container {
    background-image: linear-gradient(92.21deg, rgba(var(--soriva-gradient-color-rgb), 0.9) 0%, rgba(var(--soriva-primary-color-rgb), 0.9) 100%);
  }