html body .btn {
  --bs-btn-border-radius: #{$border-radius};
  --bs-btn-font-size: var(--bs-body-font-size);
  --bs-btn-padding-x: .75rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-bg: var(--bs-btn-bg);
  --bs-btn-disabled-border-color: var(--bs-btn-border-color);


  line-height: 1;
  transition: all .25s ease;
  cursor: pointer;


  &:hover,
  &:focus,
  &:focus:active {
    box-shadow: none;
  }

  > i {
    margin-right: .25rem;
  }

  &.btn-xs {
    font-size: calc(var(--bs-btn-font-size) * .5);
    padding: calc(var(--bs-btn-padding-y) * .5) calc(var(--bs-btn-padding-y) * .5);
  }

  &.btn-sm {
    font-size: calc(var(--bs-btn-font-size) * .75);
    padding: calc(var(--bs-btn-padding-y) * .75) calc(var(--bs-btn-padding-y) * .75);
  }

  &.btn-lg {
    font-size: calc(var(--bs-btn-font-size) * 1.25);
    padding: calc(var(--bs-btn-padding-y) * 1.25) calc(var(--bs-btn-padding-y) * 1.25);
  }

  &.btn-xl {
    font-size: calc(var(--bs-btn-font-size) * 1.5);
    padding: calc(var(--bs-btn-padding-y) * 1.5) calc(var(--bs-btn-padding-y) * 1.5);
  }


  &.btn-primary {
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-color: var(--bs-white);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: var(--bs-primary);

    color: var(--bs-btn-color);

    &:hover {
      color: var(--bs-btn-hover-color);
    }
  }

  &.btn-outline-primary {
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-body-color-inverse);

    color: var(--bs-btn-color);

    &:hover {
      color: var(--bs-btn-hover-color);
    }
  }

  &.btn-secondary {
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-secondary);
    --bs-btn-hover-bg: transparent;

    color: var(--bs-btn-color);

    &:hover {
      color: var(--bs-btn-hover-color);
    }
  }

  &.btn-outline-secondary {
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-body-color-inverse);

    color: var(--bs-btn-color);

    &:hover {
      color: var(--bs-btn-hover-color);
    }
  }

  &.btn-white {
    --bs-btn-hover-border-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-white);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-white);

    color: var(--bs-btn-color);

    &:hover {
      color: var(--bs-btn-hover-color);
    }
  }

  &.btn-outline-black {
    --bs-btn-hover-border-color: var(--bs-black);
    --bs-btn-border-color: var(--bs-black);;
    --bs-btn-color: var(--bs-black);;
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--bs-black);
    --bs-btn-hover-color: var(--bs-white);

    color: var(--bs-btn-color);

    &:hover {
      color: var(--bs-btn-hover-color);
    }
  }

  &.btn-outline-white {
    --bs-btn-hover-border-color: var(--bs-white);
    --bs-btn-border-color: var(--bs-white);;
    --bs-btn-color: var(--bs-white);;
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-color: var(--bs-primary);

    color: var(--bs-btn-color);

    &:hover {
      color: var(--bs-btn-hover-color);
    }
  }

  &.btn-link {
    padding: 0px;
    --bs-btn-color: var(--bs-primary);

    &:hover,
    &:focus {
      outline: none;
      box-shadow: none;
    }

    &.with-arrow {
      text-decoration: none;

      &:before {
        @extend %fa-icon;
        @extend .fal;
        content: fa-content($fa-var-angle-double-right);
        display: inline-block;
        margin-right: rfs-value(5px);
        vertical-align: middle;
        white-space: nowrap;
        position: relative;
        top: -2px;
        @include font-size(20px);
      }
    }
  }

  &.btn-blank {
    --bs-btn-bg: transparent;
    border: 0px;
    padding: 0px;
  }


  /*
  &.with-icon {
    text-align: left;

    i {
      width: rfs-value(25px);
      display: inline-block;
      text-align: center;
    }

    &.btn-sm {
      width: rfs-value(20px);
    }
  }

   */
}


//FIX/HACK
html body {
  .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
  }
}