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

// Icon
.btn {
  svg {
    fill: $white;
  }
  &:not(.disabled):not(:disabled) {
    .svg-redo {
      animation: spin 1.5s linear infinite;
    }
  }
}
.btn-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  .btn-icon-svg {
    width: 3.5rem;
    margin-left: 1.3rem;
    flex-shrink: 0;
  }
  &:after, &:before {
    display: none;
  }
}
.btn-no-chevron {
  &:after, &:before {
    display: none;
  }
}

.btn-round {
  width: 5rem;
  height: 5rem;
  padding: 0;
  &:after {
    display: none;
  }
}

.btn-square {
  @extend .btn-round;
  border-radius: 0;
}

/* Back to top */
.btn-back-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  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: 0.3rem;
    background: {
      image: str-replace($btn-top-icon, "#", "%23");
      repeat: no-repeat;
      size: contain;
    };
    transform: rotate(-90deg);
  }
  &:after {
    display: none;
  }
  &: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: 3rem;
  height: 3rem;
  padding: 0;
  font-size: 2rem;
  font-weight: $font-weight-bold;
  &:not(:disabled):not(.disabled):hover {
    box-shadow: none;
  }
}

.btn-increment, .btn-decrement {
  &:before, &:after {
    display: none;
  }
}

// Btn link
button.link-secondary {
  padding: 0;
}

// Btn add cart
.btn-add-cart {
  position: relative;
  @extend .btn-icon;

  .icon-wrapper {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    &:after {
      content: str_replace($btn-add-cart-icon, "#", "%23");
      vertical-align: text-top;
    }
  }
  .btn-icon-svg {
    position: relative;
  }
  &.load {
    .icon-wrapper:after {
      content: str_replace($btn-add-cart-load-icon, "#", "%23");
      display: block;
      height: $btn-add-cart-load-icon-height;
      animation: spin 1.5s linear infinite;
    }
  }
  &.valid {
    .icon-wrapper:after {
      content: str_replace($btn-add-cart-valid-icon, "#", "%23");
    }
  }
}
