.loading {
  width: 36px;
  height: 36px;
  animation: loader-rotate 2s linear infinite
}

.loading--small {
  width: 24px;
  height: 24px
}

.loading--btn {
  width: 1.2em;
  height: 1.2em;
  margin-right: .75em
}

.loader {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: loader-dash 1s linear infinite
}

@keyframes loader-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px
  }

  to {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px
  }
}

.btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 24px;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 100px;
  transition: all .3s;
  border: 0 none
}

.btn:hover {
  text-decoration: none
}

.btn--block {
  width: 100%
}

.btn--loading {
  pointer-events: none;
  opacity: .75
}

.btn--default {
  padding-top: 9px;
  padding-bottom: 9px;
  color: #333;
  border: 1px solid #d5d5d5;
  background-color: #fff
}

.btn--default:hover {
  color: #666;
  background-color: #fcfcfc
}

.btn--default:active {
  color: #666;
  background-color: #f9f9f9
}

.btn--outline {
  padding-top: 9px;
  padding-bottom: 9px;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent
}

.btn--outline:hover {
  color: #fff;
  background-color: #ffffff26
}

.btn--outline:active {
  color: #fff;
  background-color: #fff3
}

.btn--light {
  color: #3c85ff;
  border: 1px solid #3c85ff;
  background-color: transparent
}

.btn--light:hover {
  color: #3c85ff;
  background-color: #f6f9ff
}

.btn--light:active {
  color: #3c85ff;
  background-color: #e4f0ff
}

.btn--primary {
  color: #fff;
  background-color: #3c85ff;
  background-image: linear-gradient(to right, #01baff, #3c85ff);
  box-shadow: 0 3px 15px #02b9ff33
}

.btn--primary:hover,
.btn--primary:active {
  color: #fff;
  background-color: #3c85ff;
  background-image: linear-gradient(to right, #3c85ff, #3c85ff)
}

.btn--success {
  color: #fff;
  background-color: #20d071;
  background-image: linear-gradient(to right, #42ec6e, #20d071);
  box-shadow: 0 3px 15px #20d07133
}

.btn--success:hover,
.btn--success:active {
  color: #fff;
  background-color: #20d071;
  background-image: linear-gradient(to right, #20d071, #20d071)
}

.btn--warn {
  color: #fff;
  background-color: #ff720b;
  background-image: linear-gradient(to right, #fb922f, #ff720b);
  box-shadow: 0 3px 15px #fb922f66
}

.btn--warn:hover,
.btn--warn:active {
  color: #fff;
  background-color: #ff720b;
  background-image: linear-gradient(to right, #ff720b, #ff720b)
}

.btn--danger {
  color: #fff;
  background-color: #ff6a7b;
  background-image: linear-gradient(to right, #ff6a7b, #f5465a);
  box-shadow: 0 3px 15px #e4545133
}

.btn--danger:hover,
.btn--danger:active {
  color: #fff;
  background-color: #f5465a;
  background-image: linear-gradient(to right, #f5465a, #f5465a)
}

.btn--small {
  font-size: 14px;
  padding: 5px 16px
}

.btn__loading {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0000004d;
  border-radius: 100px
}