.zent-btn-primary {
  color: $btn-white;
  background: $btn-primary;
  border-color: $btn-primary;

  &:link,
  &:visited,
  &:focus {
    color: $btn-white;
  }

  &:hover {
    color: $btn-white;
    background: $btn-primary-hover;
    border-color: $btn-primary-hover;
  }

  &:active {
    color: $btn-white;
    background: $btn-primary-active;
    border-color: $btn-primary-active;
  }

  &.zent-btn-loading {
    &:hover,
    &:active {
      background: $btn-primary;
      border-color: $btn-primary;
    }

    &::after {
      border-color: $btn-white transparent transparent transparent;
    }
  }
}

.zent-btn-primary-outline {
  color: $btn-primary;
  border-color: $btn-primary;
  background: $btn-white;

  &:link,
  &:visited,
  &:focus {
    color: $btn-primary;
  }

  &:hover {
    color: $btn-primary-hover;
    border-color: $btn-primary-hover;
  }

  &:active {
    color: $btn-primary-active;
    background: $btn-light-gray;
    border-color: $btn-primary-active;
  }

  &.zent-btn-loading {
    &:hover,
    &:active {
      border-color: $btn-primary;
      background: $btn-white;
    }

    &::after {
      border-color: $btn-primary transparent transparent transparent;
    }
  }
}

.zent-btn-danger {
  color: $btn-white;
  background: $btn-danger;
  border-color: $btn-danger;

  &:link,
  &:visited,
  &:focus {
    color: $btn-white;
  }

  &:hover {
    color: $btn-white;
    background: $btn-danger-hover;
    border-color: $btn-danger-hover;
  }

  &:active {
    color: $btn-white;
    background: $btn-danger-active;
    border-color: $btn-danger-active;
  }

  &.zent-btn-loading {
    &:hover,
    &:active {
      background: $btn-danger;
      border-color: $btn-danger-active;
    }

    &::after {
      border-color: $btn-white transparent transparent transparent;
    }
  }
}

.zent-btn-danger-outline {
  color: $btn-danger;
  border-color: $btn-danger;
  background: $btn-white;

  &:link,
  &:visited,
  &:focus {
    color: $btn-danger;
  }

  &:hover {
    color: $btn-danger-hover;
    border-color: $btn-danger-hover;
  }

  &:active {
    color: $btn-danger-active;
    background: $btn-light-gray;
    border-color: $btn-danger-active;
  }

  &.zent-btn-loading {
    &:hover,
    &:active {
      border-color: $btn-danger;
      background: $btn-white;
    }

    &::after {
      border-color: $btn-danger transparent transparent transparent;
    }
  }
}

.zent-btn-success {
  color: $btn-white;
  background: $btn-success;
  border-color: $btn-success;

  &:link,
  &:visited,
  &:focus {
    color: $btn-white;
  }

  &:hover {
    color: $btn-white;
    background: $btn-success-hover;
    border-color: $btn-success-hover;
  }

  &:active {
    color: $btn-white;
    background: $btn-success-active;
    border-color: $btn-success-active;
  }

  &.zent-btn-loading {
    &:hover,
    &:active {
      background: $btn-success;
      border-color: $btn-success-active;
    }

    &::after {
      border-color: $btn-white transparent transparent transparent;
    }
  }
}

.zent-btn-success-outline {
  color: $btn-success;
  border-color: $btn-success;
  background: $btn-white;

  &:link,
  &:visited,
  &:focus {
    color: $btn-success;
  }

  &:hover {
    color: $btn-success-hover;
    border-color: $btn-success-hover;
  }

  &:active {
    color: $btn-success-active;
    background: $btn-light-gray;
    border-color: $btn-success-active;
  }

  &.zent-btn-loading {
    &:hover,
    &:active {
      border-color: $btn-success;
      background: $btn-white;
    }

    &::after {
      border-color: $btn-success transparent transparent transparent;
    }
  }
}