:root {
  --bns-arrow-btn-x-start: -2px;
  --bns-arrow-btn-x-end: 5px;
  --bns-arrow-extended-btn-x-start: 0;
  --bns-arrow-extended-btn-x-end: 1.25rem;
}
.bns-arrow-btn i,
.bns-arrow-btn svg {
  display: inline-block;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  -webkit-transform: translateX(var(--bns-arrow-btn-x-start));
  -moz-transform: translateX(var(--bns-arrow-btn-x-start));
  -ms-transform: translateX(var(--bns-arrow-btn-x-start));
  -o-transform: translateX(var(--bns-arrow-btn-x-start));
  transform: translateX(var(--bns-arrow-btn-x-start));
}

.bns-arrow-btn-wrapper:hover .bns-arrow-btn i,
.bns-arrow-btn-wrapper:hover .bns-arrow-btn svg,
.bns-arrow-btn:hover i,
.bns-arrow-btn:hover svg {
  opacity: 1;
  -webkit-transform: translateX(var(--bns-arrow-btn-x-end));
  -moz-transform: translateX(var(--bns-arrow-btn-x-end));
  -ms-transform: translateX(var(--bns-arrow-btn-x-end));
  -o-transform: translateX(var(--bns-arrow-btn-x-end));
  transform: translateX(var(--bns-arrow-btn-x-end));
}

.bns-arrow-extended-btn i,
.bns-arrow-extended-btn svg {
  display: inline-block;
  opacity: 1;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  -webkit-transform: translateX(var(--bns-arrow-extended-btn-x-start));
  -moz-transform: translateX(var(--bns-arrow-extended-btn-x-start));
  -ms-transform: translateX(var(--bns-arrow-extended-btn-x-start));
  -o-transform: translateX(var(--bns-arrow-extended-btn-x-start));
  transform: translateX(var(--bns-arrow-extended-btn-x-start));
}

.bns-arrow-btn-wrapper:hover .bns-arrow-extended-btn i,
.bns-arrow-btn-wrapper:hover .bns-arrow-extended-btn svg,
.bns-arrow-extended-btn:hover i,
.bns-arrow-extended-btn:hover svg {
  opacity: 1;
  -webkit-transform: translateX(var(--bns-arrow-extended-btn-x-end));
  -moz-transform: translateX(var(--bns-arrow-extended-btn-x-end));
  -ms-transform: translateX(var(--bns-arrow-extended-btn-x-end));
  -o-transform: translateX(var(--bns-arrow-extended-btn-x-end));
  transform: translateX(var(--bns-arrow-extended-btn-x-end));
}


.bns-arrow-btn-left i,
.bns-arrow-btn-left svg {
  display: inline-block;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  -webkit-transform: translateX(calc(-1 * var(--bns-arrow--btn-x-start)));
  -moz-transform: translateX(calc(-1 * var(--bns-arrow--btn-x-start)));
  -ms-transform: translateX(calc(-1 * var(--bns-arrow--btn-x-start)));
  -o-transform: translateX(calc(-1 * var(--bns-arrow--btn-x-start)));
  transform: translateX(calc(-1 * var(--bns-arrow--btn-x-start)));
}

.bns-arrow-btn-wrapper:hover .bns-arrow-btn-left i,
.bns-arrow-btn-wrapper:hover .bns-arrow-btn-left svg,
.bns-arrow-btn-left:hover i,
.bns-arrow-btn-left:hover svg {
  opacity: 1;
  -webkit-transform: translateX(calc(-1 * var(--bns-arrow--btn-x-end)));
  -moz-transform: translateX(calc(-1 * var(--bns-arrow--btn-x-end)));
  -ms-transform: translateX(calc(-1 * var(--bns-arrow--btn-x-end)));
  -o-transform: translateX(calc(-1 * var(--bns-arrow--btn-x-end)));
  transform: translateX(calc(-1 * var(--bns-arrow--btn-x-end)));
}

.bns-arrow-extended-btn-left i,
.bns-arrow-extended-btn-left svg {
  display: inline-block;
  opacity: 1;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  -webkit-transform: translateX(calc(-1 * var(--bns-arrow-extended-btn-x-start)));
  -moz-transform: translateX(calc(-1 * var(--bns-arrow-extended-btn-x-start)));
  -ms-transform: translateX(calc(-1 * var(--bns-arrow-extended-btn-x-start)));
  -o-transform: translateX(calc(-1 * var(--bns-arrow-extended-btn-x-start)));
  transform: translateX(calc(-1 * var(--bns-arrow-extended-btn-x-start)));
}

.bns-arrow-btn-wrapper:hover .bns-arrow-extended-btn-left i,
.bns-arrow-btn-wrapper:hover .bns-arrow-extended-btn-left svg,
.bns-arrow-extended-btn-left:hover i,
.bns-arrow-extended-btn-left:hover svg {
  opacity: 1;
  -webkit-transform: translateX(calc(-1 * var(--bns-arrow-extended-btn-x-end)));
  -moz-transform: translateX(calc(-1 * var(--bns-arrow-extended-btn-x-end)));
  -ms-transform: translateX(calc(-1 * var(--bns-arrow-extended-btn-x-end)));
  -o-transform: translateX(calc(-1 * var(--bns-arrow-extended-btn-x-end)));
  transform: translateX(calc(-1 * var(--bns-arrow-extended-btn-x-end)));
}