/*///////////////////////////// REFRESH BUTTON ////////////////////////////////*/

.ui-btn {
  --btn-default-bg: transparent;
  --btn-padding: 14px 20px;
  --btn-hover-bg: #13f6e57a;
  --btn-transition: .3s;
  --btn-letter-spacing: .1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgba(0, 0, 0, 0.137);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: #fff;
  --default-btn-color: #fff;
  --font-size: 18px;
  /* 👆 this field should not be empty */
  --font-weight: 400;
  --font-family: 'Roboto Mono',monospace!important;
}

/* button settings 👆 */

.ui-btn {
  box-sizing: border-box;
  padding: var(--btn-padding);
  color: var(--default-btn-color);
  font: var(--font-weight) var(--font-size) var(--font-family);
  background: var(--btn-default-bg);
  cursor: pointer;
  transition: var(--btn-transition);
  overflow: hidden;
  box-shadow: var(--btn-shadow);
  border-radius: 10px;
  border: 1px solid #fff;
  position: relative;
  font-family: 'Roboto Mono',monospace !important;
  left: 4px;
}

.ui-btn span {
  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
}

.ui-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.ui-btn:hover {
  background-color: #13f6e54f;
  box-shadow: 0 0 20px 0 #ffffff60;
  border: 1px solid #fff;
}

.ui-btn:focus {
  outline: none;
}

.ui-btn:hover span, .ui-btn:focus span {
  color: var(--hover-btn-color);
}

.ui-btn:hover span::before {
  animation: chitchat linear both var(--btn-animation-duration);
}

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

  5% {
    content: "0";
  }

  10% {
    content: "1";
  }

  15% {
    content: "00011";
  }

  20% {
    content: "01";
  }

  25% {
    content: "110";
  }

  30% {
    content: "#1";
  }

  35% {
    content: "0";
  }

  40% {
    content: "001%";
  }

  45% {
    content: "1101";
  }

  50% {
    content: "001";
  }

  55% {
    content: "11000";
  }

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

  65% {
    content: "00101";
    right: 0;
  }

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

  75% {
    content: "11100";
    right: 0;
  }

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

  85% {
    content: "00";
    right: 0;
  }

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

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

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

/*/////////////////////////////////////////////////////////////*/