.animated-button-link {
  text-decoration: none;
}

.animated-button {
  --border: 1px solid #8b949a;
  --radius: 45.261px;
  --gap: 4px;
  --pad: 24px 36px;

  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--pad);
  border: var(--border);
  background: linear-gradient(90deg, #4f677f40, #4f677f00);
  border-radius: var(--radius);
  font: 600 16px/1 Nord-Regular-400, sans-serif;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button svg {
  position: absolute;
  width: 24px;
  fill: #fff;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
  right: 16px;
}
.animated-button .arr-2 {
  left: -25%;
}

.animated-button .circle {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  letter-spacing: 1.474px;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  line-height: 120%;
}

/* Hover */
.animated-button:hover {
  border-radius: 12px;
}

.animated-button:hover .arr-1 {
  right: -25%;
}
.animated-button:hover .arr-2 {
  left: 16px;
}
.animated-button:hover .text {
  transform: translateX(12px);
}
.animated-button:hover .circle {
  width: 120%;
  height: 220px;
  opacity: 1;
}

/* Active */
.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #8b949a66;
}

/* Rimossi !important inutili e proprietà ridondanti */
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.animated-button-link {
  text-decoration: none;
}

.animated-button-dark {
  --border: 1px solid #8b949a;
  --radius: 45.261px;
  --gap: 4px;
  --pad: 24px 36px;

  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--pad);
  border: var(--border);
  background: transparent;
  border-radius: var(--radius);
  font: 600 16px/120% Nord-Regular-400, sans-serif;
  color: #1b2432;
  letter-spacing: 1.474px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button-dark svg {
  width: 24px;
  fill: #1b2432;
  position: absolute;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button-dark .arr-1 {
  right: 16px;
}
.animated-button-dark .arr-2 {
  left: -25%;
}

.animated-button-dark .circle {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 20px;
  height: 20px;
  background: #1b2432;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button-dark .text {
  position: relative;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hover */
.animated-button-dark:hover {
  border-radius: 12px;
  color: #1b2432;
}

.animated-button-dark:hover .arr-1 {
  right: -25%;
}
.animated-button-dark:hover .arr-2 {
  left: 16px;
}
.animated-button-dark:hover .text {
  transform: translateX(12px);
}
.animated-button-dark:hover svg {
  fill: #1b2432;
}
.animated-button-dark:hover .circle {
  width: 120%;
  height: 220px;
  opacity: 0.12;
}

/* Active */
.animated-button-dark:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #8b949a66;
}