/*------------------------------------------------------------
BUTTONS CUSTOM
====================================*/

/* Variables Custom */
$btn-top-width: 4.6rem;
$btn-top-height: 4.6rem;
$btn-top-bg: $dark;
$btn-top-color: $white;
$btn-top-hover-bg: $primary;
$btn-top-hover-color: $white;
$btn-top-font-size: 1rem;
$btn-top-border-width: 0;
$btn-top-border-color: transparent;
$btn-top-icon: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='#{$btn-top-color}' d='M8,0,6.545,1.455l5.506,5.506H0V9.039H12.052L6.545,14.545,8,16l8-8Z'/%3E%3C/svg%3E%0A"), "#", "%23");
$btn-top-icon-width: 1.6rem;
$btn-top-icon-height: 1.6rem;
/***************************************/

// Icon
.btn {
  svg {
    fill: $white;
  }
  &:not(.disabled):not(:disabled) {
    .svg-redo {
      animation: spin 1.5s linear infinite;
    }
  }
}
.btn-icon {
  display: inline-block;
  position: relative;
  width: 35px;
  margin-left: 10px;
  svg {
    position: absolute;
    left: 0;
    top: -14px;
  }
}

.btn-round {
  width: 50px;
  height: 50px;
  padding: 0;
}

.btn-square {
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 0;
}

/* Back to top */
.btn-back-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  width: $btn-top-width;
  height: $btn-top-height;
  font-size: $btn-top-font-size;
  text-align: center;
  text-decoration: none;
  line-height: $btn-top-font-size;
  color: $btn-top-color;
  background: $btn-top-bg;
  border: $btn-top-border-width solid $btn-top-border-color;
  &:before {
    content: '';
    display: block;
    width: $btn-top-icon-width;
    height: $btn-top-icon-height;
    margin-bottom: 3px;
    background: {
      image: $btn-top-icon;
      repeat: no-repeat;
      size: contain;
    };
    transform: rotate(-90deg);
  }
  &:hover, &:focus, &:active {
    color: $btn-top-hover-color;
    background: $btn-top-hover-bg;
  }
}

/* Help */
.btn-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 20px;
  font-weight: $font-weight-bold;
  &:not(:disabled):not(.disabled):hover {
    box-shadow: none;
  }
}
